CCS drie lagen menu

Status
Niet open voor verdere reacties.

bhofkens

Gebruiker
Lid geworden
19 jan 2008
Berichten
228
Ik ben bezig met een site ik wilde drie lagen menu hebben echter lukt het me maar niet kan iemand me helpen:

Het CCS bestand ziet er nu zo uit:

Code:
#navbar {
    margin: 0px;
    padding: 0px;
    margin-top: 0px;
    /*height: 1em;*/
    font-family:Verdana, Geneva, sans-serif;
    font-size: 1.1em;
    font-weight: bold;
}
#navbar li {
    list-style: none;
    text-align: center;
    float: left;
    width: 192px;
    height: 30px;
}
#navbar li a {
    display: block;
    /*padding-left: 6px;
    padding-right: 6px;*/
    text-decoration: none;
}
#navbar ul {
    z-index: 99;
    display: none;
    /*width: 10em; */
    margin-left: 0px;
    background-color:#000;
    text-align: left;
}

a.menu:link, a.menu:visited {
    padding-top: 11px;
    color: #d3cfc0;
    text-decoration: none;
    height: 40px;
    width: 192px;
    border-right: 1px solid #cccccc;
}
a.menu:hover {
    padding-top: 11px;
    color: #d3cfc0;
    text-decoration: none;
    background-color:#000;
    height: 34px;
    width: 192px;
    border-right: 1px solid #cccccc;
}

.menuactive {
    padding-top: 11px;
    color: #d3cfc0;
    text-decoration: none;
    background-color:#000;
    height: 34px;
    width: 192px;
    border-right: 1px solid #cccccc;
}
#navbar li:hover ul, #navbar li.hover ul {
    z-index: 99;
    display: block;
    position: absolute;
    /*margin: 0;*/
    top: 198px;
    padding: 0;
    color: #000;
    text-align: left;
    background-color:#000;
    height: 30px;
}
#navbar li:hover li, #navbar li.hover li {
    float: none;
    background-color: #000;
    text-align: center;
}
#navbar li:hover li a, #navbar li.hover li a {
}

#navbar ul ul {
    z-index: 99;
    display: none;
    /*width: 10em; */
    left: 190px;
    background-color:#000;
    text-align: left;
}

#navbar li:hover ul ul , #navbar li.hover ul ul {
    z-index: 99;
    display: block;
    position:absolute;
    margin: 0;
    padding: 0;
    color: #000;
    text-align: left;
}
#navbar li:hover ul ul, #navbar1 li.hover ul ul {
    float: none;
}

.contact-item:link {
    padding-top: 10px;
    color: #d3cfc0;
    height: 35px;
    width: 192px !important;
    border: none !important;
}

.contact-item:hover {
    padding-top: 10px;
    background-color:#000;
    color: #d3cfc0;
    height: 35px;
    width: 192px !important;
    border: none !important;
}

a.sub-menu:link, a.sub-menu:visited { text-align: left; padding-left: 5px; padding-top: 5px; font-size:12px; color: #d3cfc0; text-decoration: none; font-weight: bold; 
height: 25px;}
a.sub-menu:hover { text-align: left; padding-left: 5px; padding-top: 5px; font-size:12px; color: #d3cfc0; text-decoration:none; font-weight:bold; background-color: #aea891;height: 25px;}
.sub-menuactive { text-align: left; padding-left: 5px; padding-top: 5px; font-size:12px; color: #d3cfc0; text-decoration:none; font-weight:bold; background-color: #aea891; height: 25px;}

Menu script is dynamisch met een CMS opgebouwd:

PHP:
<ul id="navbar">
            <?php
            foreach($menu as $key => $menuitem){
            
                echo '<li><a href="'.$menuitem['Menuitem'].'" '. ($menuitem['Menuitem'] == $pagina['Menuitem'] ? 'class="menuactive"' : 'class="menu"') .' >'.$menuitem['Menuitemtitel'].'</a>';
                $sql4 = mysql_query("SELECT * FROM `Editor` WHERE `Actief`='Ja' AND `Hoofdmenu`='sub' AND `Waaronder`='" . $menuitem['Menuitem'] . "' ORDER BY `order`");
                //$result1 = mysql_fetch_assoc($sql4);

                if(mysql_num_rows($sql4) > 0){
                    echo '<ul>';
                    while($submenuitem = mysql_fetch_assoc($sql4)){
                        echo '<li><a href="'.$submenuitem['Menuitem'].'" class="sub-menu">'.$submenuitem['Menuitemtitel'].'</a>';
                        
                        $sql5 = mysql_query("SELECT * FROM `Editor` WHERE `Actief`='Ja' AND `Hoofdmenu`='subsub' AND `WaaronderSub`='" . $submenuitem['Menuitem'] . "' ORDER BY `order`");
                
                        if(mysql_num_rows($sql5) > 0){
                            echo '<ul>';
                            while($subsubmenuitem = mysql_fetch_assoc($sql5)){
                                echo '<li><a href="'.$subsubmenuitem['Menuitem'].'" class="sub-menu">'.$subsubmenuitem['Menuitemtitel'].'</a></li>';                            
                            }
                            echo '</ul>';
                        }
                        echo '</li>';
                    }
                    echo '</ul>';
                }
                echo '</li>';
            }
            ?>
            </ul>

Ik krijg hem meteen als de submenu opend word ook de derdemenu geopend wat meer verder van het menu verwijderd. Kan iemand me advies geven.
 
Uit de php is niet goed de html structuur te halen... Vooral waar de class'es terecht komen. Probeer deze css menu framework eens. Hier hoef je alleen maar de vormgeving te doen en hoef je niet na te denken over de werking van het menu.
Code:
/*** menu framework niet wijzigen ***/
#navbar, #navbar ul, #navbar li, #navbar a {
  margin: 0; padding: 0; border: 0; outline: 0; list-style: none;
}
#navbar {
  position: relative; z-index: 597; float: left;
}
#navbar li {
  float: left; min-height: 1px; line-height: 1; vertical-align: middle;
}
#navbar li:hover {
  position: relative; z-index: 599; cursor: pointer;
}
#navbar a, #navbar a:link, #navbar a:visited, #navbar a:hover {
  display: block; text-decoration: none; line-height: 1;
}
#navbar ul {
  visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 598;
}
#navbar ul li {
  float: none;
}
#navbar ul ul {
  top: 0; left: 100%;
}
#navbar li:hover > ul {
  visibility: visible;
}  /*** einde menu framework hieronder mag je wijzigen ***/

/* vorgeving topmenu */
#navbar > li {
  border-right: 1px solid #ccc;
}
#navbar > li:first-child {
  border-left: 1px solid #ccc;
}
#navbar > li > a {
  width: 180px;
  padding: 12px 6px;
  font: bold 20px verdana, geneva, sans-serif;
  text-align: center;
  background-color: #fff;
  color: #d3cfc0;
}

/* vorgeving submenu */
#navbar ul {
  background-color: #000;
}
#navbar ul li a {
  width: 180px;
  padding: 8px 6px;
  font: bold 12px verdana, geneva, sans-serif;
  text-align: left;
  background-color: #000;
  color: #d3cfc0;
}

/* actieve knop */
#navbar .menuactive,
#navbar .sub-menuactive {
  background-color: #d3cfc0;
  color: #aea891;
}

/* hover topmenu */
#navbar > li:hover > a,
#navbar > li:hover > a:active {
  background-color: #000;
  color: #d3cfc0;
}

/* hover submenu */
#navbar ul li:hover a,
#navbar ul li:hover a:active {
  background-color: #aea891;
  color: #d3cfc0;
}
Suc6. Have fun.
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan