I have a problem with the dropdown menu in Twitter Bootstrap 3.3.6
After clicking on the button .dropdown I visualize correctly the .dropdown-menu content, then if I click again on .dropdown or outside .dropdown-menu to close the .dropdown button becomes hidden.
After clicking on .dropdown:
<ul class="nav nav-pills">
<li role="presentation" class="dropdown open">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="true">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">...</ul>
</li>
</ul>
Afert closing the .dropdown-menu:
<ul class="nav nav-pills">
<li role="presentation" class="dropdown" style="display: none;">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">...</ul>
</li>
</ul>
How can I solve it?
Related
I am using Bootstrap 5 with my Navbar. I have two Dropdown Links for my site and whenever I try to click on the page that holds them (ex. Reviews), it doesn't work. I don't believe I'm missing any Bootstrap links or jQuery to make the Dropdown work.
<div class="container-fluid"> <a class="navbar-brand" href="index.html"><img src="images-logo/logo.png" alt="Game Picker"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item"> <a class="nav-link" aria-current="page" href="news.html">News</a></li>
<li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" aria-current="page" href="previews.html" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Previews </a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li><a class="dropdown-item" aria-current="page" href="#">Action</a></li>
<li><a class="dropdown-item" aria-current="page" href="#">Another action</a></li>
<li><a class="dropdown-item" aria-current="page" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" aria-current="page" href="reviews.html" id="navbarDropdownMenuLinkTwo" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Reviews </a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLinkTwo">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li></div></div></nav>
I have 2 drop-down menus
<div class="dropdown">
<button class=" js-dropdownDate dropdown-toggle" type="button" data-toggle="dropdown" data-value="#Model.WeekNumberDayStart" id="periodTypeNumber">
<span class="toggle-text">First</span>
<span class="dropdown-caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation">
<a class="active" role="menuitem" tabindex="-1" href="#" data-value="1">First</a>
</li>
<li role="presentation">
<a class="" role="menuitem" tabindex="-1" href="#" data-value="2">Second</a>
</li>
<li role="presentation" data-value="3">
<a class="" role="menuitem" tabindex="-1" href="#" data-value="3">Third</a>
</li>
<li role="presentation" data-value="4">
<a class="" role="menuitem" tabindex="-1" href="#" data-value="4">Fourth</a>
</li>
<li role="presentation" data-value="5">
<a class="" role="menuitem" tabindex="-1" href="#" data-value="5">Fifth</a>
</li>
</ul>
</div>
<div class="dropdown">
<button class=" js-dropdownDate dropdown-toggle" type="button" data-toggle="dropdown" id="periodTypeDay" data-value="#Model.DayNubmerOfWeek">
<span class="toggle-text">monday</span>
<span class="dropdown-caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation" data-value="1">
<a class="active" role="menuitem" tabindex="-1" href="#" data-value="1">monday</a>
</li>
<li role="presentation" data-value="2">
<a class="" role="menuitem" tabindex="-1" href="#" data-value="2">tuesday</a>
</li>
<li role="presentation" data-value="3">
<a class="" role="menuitem" tabindex="-1" href="#" data-value="3">wednesday</a>
</li>
<li role="presentation" data-value="4">
<a class="" role="menuitem" tabindex="-1" href="#" data-value="4">thursday</a>
</li>
<li role="presentation" data-value="5">
<a class="" role="menuitem" tabindex="-1" href="#" data-value="5">friday </a>
</li>
<li role="presentation" data-value="6">
<a class="" role="menuitem" tabindex="-1" href="#" data-value="6">saturday</a>
</li>
<li role="presentation" data-value="7">
<a class="" role="menuitem" tabindex="-1" href="#" data-value="7">sunday</a>
</li>
</ul>
</div>
and if the date from #Model.WeekNumberDayStart(int - like 1,2,3,4...) = data-value = "1" then need to write class = "active" otherwise just class = ""
maybe somehow it can be done differently through the menu itself through DropDownList?
and if the date from #Model.WeekNumberDayStart(int - like 1,2,3,4...)
= data-value = "1" then need to write class = "active" otherwise just class = ""
It cannot be achieved by menu itself. You need to use jquery code to achieve.
Since you have two dropdown menus, you need to distinguish the a tag of these two menus.
Therefore, you can add custom attributes and corresponding values to each group of a tags to ensure that the corresponding elements can be obtained in jquery.
Below is the class active binding for the first group of dropdown menu example.
<div class="dropdown">
<button class=" js-dropdownDate dropdown-toggle" type="button" data-toggle="dropdown" data-value="#Model.WeekNumberDayStart" id="periodTypeNumber">
<span class="toggle-text">First</span>
<span class="dropdown-caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation">
<a class="active" role="menuitem" tabindex="-1" href="#" data-value="1" droptype="WeekNumberDayStart">First</a>
</li>
<li role="presentation">
<a class="" role="menuitem" tabindex="-1" href="#" data-value="2" droptype="WeekNumberDayStart">Second</a>
</li>
<li role="presentation" data-value="3">
<a class="" role="menuitem" tabindex="-1" href="#" data-value="3" droptype="WeekNumberDayStart">Third</a>
</li>
<li role="presentation" data-value="4">
<a class="" role="menuitem" tabindex="-1" href="#" data-value="4" droptype="WeekNumberDayStart">Fourth</a>
</li>
<li role="presentation" data-value="5">
<a class="" role="menuitem" tabindex="-1" href="#" data-value="5" droptype="WeekNumberDayStart">Fifth</a>
</li>
</ul>
</div>
jquery to change binding class active according to #Model.WeekNumberDayStart value:
<script>
$(function () {
$("a[droptype=WeekNumberDayStart]").each(function () {
$(this).removeClass("active");
if ($(this).attr("data-value") == $("#periodTypeNumber").attr("data-value")) {
$(this).addClass("active");
}
})
})
</script>
I have a simple nav bar with logo on left and the word Menu on right that act as a dropdown. For small screens I need it to change the menu wording to a burger icon. So far I can get it to change to an icon but the list still contains the word menu and thats still a dropdown. How do I make it so the list only contains the items on the dropdown and not the dropdown itself?
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="logo pull-left animated wow fadeInLeft"><a class="navbar-brand" href="index.html"><img src="LOGO" alt="" title=""></a></div>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Menu<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</li>
</ul>
I have a Bootstrap 3 nav-pills menu which collapses on mobile devices however when you click the navbar-toggle menu, the menu opens and then immediately jumps up about 40-50 pixels?
It doesn't open at all on iPhone. :(
It's here:
http://www.portpatrick.me.uk/rickwood/hotel-rooms-portpatrick.php
Have double checked the CSS and I can't see, wood for the trees maybe, why it's doing this. Hope someone can help point out the obvious.
Thank you.
NJ
Menu..
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#rickwoodcollapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="rickwoodcollapse">
<ul class="nav nav-pills nav-justified">
<li role="presentation">Home</li>
<li role="presentation">Rooms</li>
<li role="presentation">Dining</li>
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false" id="attractions">Attractions <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li>Beaches & Coast</li>
<li>Gardens</li>
<li>Mull of Galloway</li>
</ul>
</li>
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false" id="activities">Activities <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li>Walking
<li>Walking in Portpatrick</li>
<li>Further Afield</li>
<li>Mull of Galloway Trail</li>
<li>Golf Courses</li>
<li>Cycling</li>
</ul>
</li>
<li role="presentation">Location</li>
<li role="presentation">News</li>
<li role="presentation">Contact</li>
</ul>
</div>
The CSS...
http://www.portpatrick.me.uk/rickwood/styles.css
I will endeavour to learn how to do a jsfiddle or github or whatever it's called. Thank you.
NJ
On your styles.css file (currently line 158) there is this line that is including a line-height.
.nav .open > a, .nav .open > a:focus, .nav .open > a:hover {
height: 60px;
background-color: #14214D;
}
Remove the height: 60px; and the menu doesn't jump anymore. I tested on an iPhone Emulator and it worked fine. I do not own an iPhone (gasp!) so I cannot test on an actual device.
I am using bootstrap 3 dropdown toggle menu in my angularjs project and everything seems to be working fine but after using angular ui bootstrap (angular-ui-bootstrap.min.js) the bootstrap 3 dropdown toggle menu is not working (meaning its not opening). Does anyone had the same issue? Please help me on how to solve this.
Index.html
<ul class="nav nav-list">
<li>
<a href="index.html">
<i class="icon-dashboard"></i>
<span class="menu-text"> Dashboard </span>
</a>
</li>
<li>
<a href="#" class="dropdown-toggle">
<i class="icon-building"></i>
<span class="menu-text"> Projects </span>
<b class="arrow icon-angle-down"></b>
</a>
<ul class="submenu">
<li>
<a href="#">
<i class="icon-double-angle-right"></i>
Find Project
</a>
</li>
<li>
<a href="#">
<i class="icon-double-angle-right"></i>
Create Project
</a>
</li>
<li>
<a href="#">
<i class="icon-double-angle-right"></i>
Update Project
</a>
</li>
</ul>
</li>
<ul>
You need to do it the Angularjs way:
Make sure to include:
Index:
<ul class="nav nav-list">
<li>
<a href="index.html">
<i class="icon-dashboard"></i>
<span class="menu-text"> Dashboard </span>
</a>
</li>
<li class="dropdown" ng-controller="DropdownCtrl">
<a class="dropdown-toggle">
<i class="icon-building"></i>
<span class="menu-text"> Projects </span>
<b class="arrow icon-angle-down"></b>
</a>
<ul class="dropdown-menu">
<li ng-repeat="choice in items">
<i class="icon-double-angle-right"></i>
<a>{{choice}}</a>
</li>
</ul>
</li>
<ul>
JS:
angular.module('plunker', ['ui.bootstrap']);
function DropdownCtrl($scope) {
$scope.items = [
"Find Project",
"Create Project",
"Update Project"
];
}