Witam,
korzystam obecnie z bootstrap 3 w którym nie ma submenu:) Chciałbym je stworzyć ale SAM żeby się czegoś nauczyć a nie tylko wziać skrypt z Bootstrap 2 i go przekleic do Bootstrap 3:) Ale zrobić to w nieco łatwiejszy i bardziej zrozumiały dla mnie sposób:).Pasek od którego będzie się pojawiało submenu już mam(jest ostylowany).Oczywiście jest to klasa ul a jego li maja w stylach wpisane display:none;.
Moj problem polega na tym ze po dodaniu skryptu w jquery elementy li nie chca się pojawiać i nie wiem czemu bo moim zdaniem wszystko dobrze zrobiłem:).Jaki może być powód:) A rozwijalne elementy li będą podobne jak przy klasie dropdown bo uważam że nie ma po co ich jeszcze raz stylować :)
<div class="collapse navbar-collapse pull-right" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" data-hover="dropdown" data-delay="100"><span class="glyphicon glyphicon-home" aria-hidden="false"></span> Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
<ul class="submenu"><span class="glyphicon glyphicon-triangle-left" aria-hidden="true"></span> Submenu
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</ul>
</li>
</ul>
</div>
w css dodaje tylko swoje style bo reszta jest z Bootstrap-a ale to pewnie wiecie:)
.submenu{
content: "<";
display: block;
color:white;
cursor: pointer;
width: 100%;
background-color:transparent;
padding: 5px 5px;
.transition(.4s);
&:hover{
background-color:white;
color: @brand-primary;
}
>li{
display: none;
list-style-type: none;
}
}
$(document).ready(function(){
$(".submenu").on("mouseenter",function() {
$(this).find('li').slideToggle();
});
});