Ik heb een responsive site gemaakt met behulp van het bootstrap framework met een menu fixed bovenin.
Wat tot nu toe niet is gelukt is het tonen/stylen van een menu-item met items die weer subitems toon en die niet over elkaar heen komen liggen zodat je ze ook kunt aanklikken (een multi dropdown menu). Nu liggen alle sub-items over elkaar heen.
Ik maak gebruik van deze styling:
Code:
/*styling navigatiebalk*/
#colornav {
background:#FF6600;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:focus, .navbar-default .navbar-nav > .active > a:hover {
background-color: #ff6600;
color: #FFFFFF;
height:80px;
padding-top:50px;
}
.navbar-default .navbar-nav > .active > a:hover {
background-color:#1c3055;
}
.navbar-default .navbar-nav > li > a {
color: #FFFFFF;
padding-top:50px;
height: 80px;
}
.navbar-default .navbar-nav > li > a:hover {
background-color:#1c3055;
color:#FFFFFF;
}
.navbar-default .navbar-toggle,
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
background-color: #1c3055;
border:solid 1px #1c3055;
}
.icon-bar {
background-color:#FFFFFF !important;
}
@media only screen and (max-width : 768px) {
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:focus, .navbar-default .navbar-nav > .active > a:hover {
padding-bottom: 15px;
padding-top: 5px;
height:30px;
}
.navbar-default .navbar-nav > li > a:hover {
padding-bottom: 15px;
padding-top: 5px;
height:30px;
background-color:#1c3055;
border-bottom: solid 2px #1c3055;
}
.navbar-default .navbar-nav > li > a {
padding-bottom: 15px;
padding-top: 5px;
height:30px;
}
}
/*einde styling navigatiebalk*/
/*dropdown als je er met de muis boven zweeft */
ul.nav li.dropdown:hover ul.dropdown-menu{ display: block; }
/* de dropdown caret (driehoekje) verwijderen */
.nav .dropdown-toggle .caret { display:none; }
/* de sub menu items stylen */
ul.dropdown-menu {
background: #FF6600;
}
.dropdown-menu > li > a {
color: #FFFFFF;
}
.dropdown-menu > li > a:hover {
color: #FFFFFF;
background-color:#1c3055;
}
Ik zou graag advies van iemand ontvangen om de subsubmenus beter te kunnen tonen, of dat iemand een ander idee heeft.
Groet,
PietJohan
joomla 3.4.8
php 5.4.22
MySql 5.5.34
Edit Astrid: Ik heb de code tussen codetags geplaatst, volgende keer graag zelf doen.
Heeft onderwerp gestart
