Autor Zpráva
Fyrbach
Profil
Mam CSS menu ktere je funkcni v iOS, Android, ve vsech prohlizecich pro PC ale nerozbali se na Nokii s Windows phone.
Javascript to nedela je to nekde v CSS pomuze mi nekdo?
Ukazka www.lipno-pocasi.cz/test

CSS

/**
 *********************************************
 * Prototype of styles for horizontal CSS-menu
 * @data 30.06.2009
 *********************************************
 * (X)HTML-scheme:
 *  <div id="menu">
 *      <ul class="menu">
 *          <li><a rel="nofollow" href="#" class="parent"><span>level 1</span></a>
 *              <div><ul>
 *                  <li><a rel="nofollow" href="#" class="parent"><span>level 2</span></a>
 *                      <div><ul><li><a rel="nofollow" href="#"><span>level 3</span></a></li></ul></div>
 *                  </li>
 *              </ul></div>
 *          </li>
 *          <li class="last"><a rel="nofollow" href="#"><span>level 1</span></a></li>
 *      </ul>
 *  </div>
 *********************************************
 */

/* menu::base */
div#menu {
 
  color: #757575;
    font-size: 11px;
 
    line-height: 150%;    
}


a {
   outline: 0;
}


ul.menu {
    clear: both;
    float: none;
    cursor: pointer;
    z-index: 1;
    position: relative;
}

div#menu ul {

    margin: 0px;
    padding: 0px;
    list-style: none;
    float: left;
    z-index: 22;
    position: relative;
}

div#menu li {

    position: relative;
    margin: 0px;
    padding: 0px;
    display: block;
    overflow: visible;
    float: left;  
    height: 30px;
    z-index: 23;
}
/* menu::level1 */
div#menu li a {
  height: 30px;
    display: block;
    float: left;
    line-height: 30px;
    text-decoration: none;
    color: #757575;
    overflow: hidden;
    z-index: 24;
  position: relative;
}

div#menu li span {  
    color: #757575;
    display: block;
    padding: 0 15px;
  background-repeat: no-repeat;
    background-position: 95% 0px;
    z-index: 26;
    position: relative;
}

div#menu li span.bg {
    display: block;
  background: transparent url('../grafika/menu-images/menu_level1_item.png') repeat-x scroll 0pt 100%;
  padding: 0;
    height: 30px;
    z-index: 5;
    position: relative;
  float: left;
}

div#menu li.current {  
    font-weight: bold;
}

div#menu li.current ul {  
    font-weight: normal;
}

/* menu::level2 */
div#menu ul.menu ul {
    padding: 0px 0px 10px;
    background: transparent url('../grafika/menu-images/menu_dropdown_bg.png') no-repeat scroll 0pt 100%;
    _background: transparent url('../grafika/menu-images/menu_dropdown_bg.gif') no-repeat scroll 0pt 100%;    
    left: -999em;
    width: 202px;
    position: absolute;
    top: 30px;
}

div#menu li:hover ul, div#menu li.sfhover ul {
    left: 0px;
    z-index: 100;
    visibility: visible;
}

div#menu li li {
    width: 100%;
    text-indent: 0px;
    float: none;
    height: auto;
}

div#menu li li a, div#menu li li span.separator {
    margin: 0px 1px;
    padding: 0px;
    background: url('../grafika/menu-images/menu_level2_item.gif') no-repeat scroll 100% bottom;
    height: auto;
    float: none;
    display: block;
    line-height: 25px;
    width: 200px;
}

div#menu li li a.parent {
    background: url('../grafika/menu-images/menu_level2_item_parent.gif') no-repeat scroll 100% bottom;
}

/* menu::level3 */
div#menu li ul ul {
    margin: -31px 0 0 201px;
}

div#menu li:hover ul ul, div#menu li.sfhover ul ul {
    border-top: 0px solid #1E1E1E;
}

div#menu li:hover ul ul, div#menu li.sfhover ul ul, div#menu li:hover ul ul ul, div#menu li.sfhover ul ul ul, div#menu li:hover ul ul ul ul, div#menu li.sfhover ul ul ul ul {
    left: -999em;
}
div#menu li li:hover ul, div#menu li li.sfhover ul, div#menu li li li:hover ul, div#menu li li li.sfhover ul, div#menu li li li li:hover ul, div#menu li li li li.sfhover ul { left: 0pt; z-index: 120; }

div#menu a:hover {
    color: #FFFFFF;
}
div#menu span:hover {
    color: #FFFFFF;
}
div#menu li ul span:hover {
    color: #FFFFFF;
}

Moderátor Chamurappi: Neobaluj prosím celý příspěvek mezi značky [pre] a [/pre].
Fisir
Profil
Reaguji na Fyrbacha:
Ono to funguje, doslova tak, jak jsi to nakódoval. Pokud podržíš prst nad odkazem Home, menu vyjede. Ostatní mobilní prohlížeče jen simulují :hover. Rozbaluj menu i při :focusu.
Fyrbach
Profil
Fisir:
Diky za vysvetleni a muzes mi poradit jak co mam zmenit a jak /jsem zacatecnik/ dik

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0