<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<li class="dropdown">
<a class=dropdown-toggle data-toggle=dropdown href="#">
<i class=material-icons>Button</i>
</a>
<ul class="dropdown-menu dropdown-messages">
<li><i class=ti-user></i> Profile</li>
<li><i class=ti-layout-sidebar-left></i> Logout</li>
</ul>
</li>
Everything works fine in the browser even when shrinking it. But when I try to click a submenu HREF doesn't work it just closes the drop-down menu it doesnt redirect...
This is the official and proper way to make a bootstrap 3.3.7 dropdown button
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li>Action</li>
<li>Another Link</li>
</ul>
</div>
Reference bootstrap 3 - drop-down button
And also load the js file before the closing body tag. Working demo
Related
I want to make a dropdown which is clickable also. Like I have a menu which has dropdown options so If I hover on it, will display dropdown and if I want to click on that, it should display link that has been provided to it.
This is the HTML:
<ul class="navbar-nav ml-auto nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="mainservice.html" id="navbarDropdown" role="button" aria-expanded="false"> Logistics Services </a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="ftl.html">FTL</a>
<a class="dropdown-item" href="ltl.html">LTL</a>
<a class="dropdown-item" href="intermodal.html">Intermodal</a>
</div>
</li>
</ul>
So, now I want that if I click on Logistics Services then mainservice.html page should display and dropdown should also be there. It should be mobile friendly also.
I tried through CSS, but when I checked it on mobile, then it is not working as expected.
ul.nav li.dropdown:hover div.dropdown-menu{
display:block;
}
How should I do it?
First time here. I am having trouble with my Bootstrap 5.1 Navbar menu. Some background: I am hosting my website locally via Xampp and my pages are php to allow for forms and cookies. Everything works great on the desktop. I have tested the responsiveness of my site in DevTools on different sized devices and the dropdown menu (the collapsed navigation menu) works perfectly on those. I then tried the dropdown menu on my S21 Ultra and Tab S6 using the locally hosted server. While the hamburger toggler will appear, it will not drop down the menu. I tried removing the button icon so that I could see if the button is toggling and it is, but it doesn't seem to be actually changing any of the values of the navbar as it does on the desktop or in the DevTools. I have tried everything. My code is up-to-date and the js and css for Bootstrap are placed in the correct locations. Please help.
<nav class="navbar navbar-expand-lg navbar-light">
<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><i id="s1-title-navbar-toggler" class="fas fa-chevron-down"></i></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item dropdown">
</li>
<li class="nav-item">
<a class="nav-link" href="REDACTED.php">REDACTED</a>
</li>
<li class="nav-item">
<a class="nav-link" href="REDACTED.php">REDACTED</a>
</li>
<li class="nav-item">
<a class="nav-link" href="REDACTED.php">*REDACTED*</a>
</li>
<li class="nav-item">
<a class="nav-link" href="REDACTED.php">*REDACTED*</a>
</li>
</ul>
</div>
</nav>
Again, it works fine on desktop and in mobile view using DevTools on Chrome. Any changes (CSS-wise) are only to color and size so they should not interfere. All other buttons on the webpage work. I am really unsure how to move forward.
All I need is for the drop-down menu to open when using a mobile device.
Remove the -bs- from data-bs-target and data-bs-toggle like below.
<nav class="navbar navbar-expand-lg navbar-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown"
aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span><i id="s1-title-navbar-toggler" class="fas fa-chevron-down"></i></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item dropdown">
</li>
<li class="nav-item">
<a class="nav-link" href="REDACTED.php">REDACTED</a>
</li>
<li class="nav-item">
<a class="nav-link" href="REDACTED.php">REDACTED</a>
</li>
<li class="nav-item">
<a class="nav-link" href="REDACTED.php">*REDACTED*</a>
</li>
<li class="nav-item">
<a class="nav-link" href="REDACTED.php">*REDACTED*</a>
</li>
</ul>
</div>
</nav>
I have a website at: https://www.romaheritage.co.uk
The issue is the Bootstrap menu at the top of the page; it works fine on desktop PCs/Laptops, but when viewed on mobile devices (phones/tablets) the two drop-down menu options "Records" & "Misc" won't expand out (at least on Android they won't, not sure about IOS because I can't test it). I think I'm overlooking something which may be obvious to others.
Can anyone view the source for the page and point me in the direction of what I've done wrong?
I made it work by replacing the a.dropdown-toggle by a div.dropdown-toggle.
The css is not good then but I believe you can make this right.
Here's the code
<div class="collapse navbar-collapse" id="tb-nav-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a class="page-scroll" href="http://www.romaheritage.co.uk/#about">About</a></li>
<li class="dropdown">
<!-- Change a to div -->
<div class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Records <span class="caret"></span></div>
<ul class="dropdown-menu">
<li>BMD</li>
<li>Census</li>
</ul>
</li>
<li><a class="page-scroll" href="http://www.romaheritage.co.uk/newspaper-articles">Newspapers</a></li>
<li><a class="page-scroll" href="http://www.romaheritage.co.uk/#blog">Blog</a></li>
<li class="dropdown">
<!-- Change a to div -->
<div class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Misc. <span class="caret"></span></div>
<ul class="dropdown-menu">
<li>Queen Victorias Journals</li>
</ul>
</li>
<li><a class="page-scroll" href="http://www.romaheritage.co.uk/#contact">Contact</a></li>
</ul>
</div>
try this one...
$("li.dropdown").click(function(e){
$(this).toggleClass("open");
});
I'm working on a small project and I need to use drop-down list, I saw a nice dropdown list without default styling.
What I need just to show how I can make the same.
Example : http://teachyourselftocode.com/
just take the same library and the same script include your project
try this
Link :
http://teachyourselftocode.com/assets/application-7790babf84d03a6beaea0c9e188a7514.css
Script:
http://teachyourselftocode.com/assets/application-c004d1f31767f20710957a4ef632ec32.js
In here you will find the way its easy to implement
http://getbootstrap.com/components/
Example:Run this with bootstrap CDN
<!-- Split button -->
<div class="btn-group">
<button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</div>
Hope you get what you need :)
Please i have few dropdowns on my page. I am trying to change selected values and is having a great problem with that. Nothing seems to fire. It seems like my jquery code is not called at all or does it work ?.
I added my drop down in an mvc view that is embedded in a Layout page. Previously i added my Java script code in the layout page header like below.
<script type="text/javascript">
$(function(){
$(".dropdown-menu li a").click(function(){
$(".btn:first-child").text($(this).text());
$(".btn:first-child").val($(this).text());
});
});
</script>
Below is my my Drop down from my view rendered on my LayoutPage #RenderPage
<div class="btn-group">
<a class="btn btn-default dropdown-toggle btn-select" data-toggle="dropdown"> <span data-bind="label">Select a Country</span>
<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
<li>United States</li>
<li>Canada</li>
<li class="divider"></li>
<li><span class="glyphicon glyphicon-star"></span> Other</li>
</ul>
</div>
<div class="btn-group">
<a class="btn btn-default dropdown-toggle btn-select" data-toggle="dropdown"> <span data-bind="label">Select a State</span>
<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
<li>Washingtong</li>
<li>California</li>
<li class="divider"></li>
<li><span class="glyphicon glyphicon-star"></span> Other</li>
</ul>
</div>
I tried many alternatives as shown in the question Here and didnt succeed. Please where do i go wrong? Any help would be appreciated
Thanks guys, have found the issue . Just like i suspected my javascrip code was not executing. I just realized my script was written before the jQuery.js script reference. That is like
<script type="text/javascript">
My script .
</script>
<script src="~/Content/js/bootstrap.min.js"></script>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
I now change it to
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
<script type="text/javascript">
My script .
</script>
Its now working. So JQuery has to be reference/loaded first. That was the mistake i made. Thank you all.