I wanted to show a dropdown on click of the img icon but the dropdown is not opening on click, Here is my code.
<div class="dropdown">
<a href="javascript:void(0);" class="dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span class="user-image" style="background-image: url('../images/rafi.jpg');"></span>
</a>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li>
<div class="profile-pic">
<img src="images/rafi.jpg" alt="Rafi Ali Khan">
</div>
</li>
<li>
<h3>{{$scope.userLocalData[0].uname}}</h3></li>
<li>Profile</li>
<li>Log Out</li>
</ul>
</div>
Your code contains some invalid HTML markup. For example, I assume you mean role="button" instead of type="button" for the anchor element. Also, you should use href="#" or data-target="#" instead of href="javascript:void(0);". You could try this:
<div class="dropdown">
<a href="#" class="dropdown-toggle" role="button" id="dropdownMenu1" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<span class="user-image" style="background-image: url('../images/rafi.jpg');"></span>
</a>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li>
<div class="profile-pic">
<img src="images/rafi.jpg" alt="Rafi Ali Khan">
</div>
</li>
<li><h3>{{$scope.userLocalData[0].uname}}</h3></li>
<li>Profile</li>
<li>Log Out</li>
</ul>
</div>
Related
I have some values in a dropdown list but I want to disable some of them.
Here I found a solution like if we add disabled style to <a> it will be disabled. I tried same for dropdown element B but it didn't work.
Help if I am wrong somewhere.
Please find below code snippet for reference,
<div class="dropdown">
<button class="fa fa-plus plusIcon dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
</button>
<div class="dropdown-menu pull-right">
<span class=" fa fa-cube dropdown-header"> Dropdown Values </span>
<span class="divider"></span>
<a class="dropdown-item">A</a>
<a class="dropdown-item disabled">B</a>
<a class="dropdown-item">C</a>
</div>
</div>
try it with list items instead. working for me
<ul class="dropdown-menu pull-right">
<li>Normal</li>
<li class="dfgdfgdf disabled">Disabled</li>
<li class="active">Active</li>
<li>Normal</li>
</ul>
Check your lib js and css reference
just add href="#"
It's working fine.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="dropdown">
<button class="fa fa-plus plusIcon dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">dropdown
</button>
<div class="dropdown-menu pull-right">
<span class=" fa fa-cube dropdown-header"> Dropdown Values </span>
<span class="divider"></span>
<a class="dropdown-item" href="#">A</a>
<a class="dropdown-item disabled" href="#">B</a>
<a class="dropdown-item" href="#">C</a>
</div>
</div>
So i am trying to accomplish a multi-level dropdown as the title says. I am only getting one level and the second level is not appearing. I am not sure what I am missing. Here is what I have:
<div class="collapse navbar-collapse" id="conference-dropdowns">
<ul class="nav navbar-nav">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">AFC<span class="caret"></span></a>
<ul class="dropdown-menu multi-level" role="menu">
<li class="dropdown-submenu">
<li>AFC South</li>
<ul class="dropdown-menu">
<li>Colts</li>
</ul>
</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input class="form-control" placeholder="Search" type="text">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Logout</li>
</ul>
</div>
I am on bootstrap 3.3.4 and just get AFC for Dropdown and inside only AFC South shows up. No submenu for it. any help would be great. thanks. I am also using bootswatch spacelab
I hope this is what you were looking for ^^
<div class="container">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">AFC
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">AFC South</a></li>
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">New dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">2nd level dropdown</a></li>
<li><a tabindex="-1" href="#">2nd level dropdown</a></li>
<!--<li class="dropdown-submenu">
<a class="test" href="#">Another dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>3rd level dropdown</li>
<li>3rd level dropdown</li>-->
</ul>
</li>
</ul>
</div>
</div>
$(document).ready(function() {
$(".dropdown-submenu a.test").on("click", function(e) {
$(this)
.next("ul")
.toggle();
e.stopPropagation();
e.preventDefault();
});
});
JSFiddle
HTML
<div class="collapse navbar-collapse" id="conference-dropdowns">
<ul class="nav navbar-nav">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">AFC <span class="caret"></span></a>
<ul class="dropdown-menu">
<!-- submenu-->
<li class="dropdown-submenu">
<a class="submenu" data-toggle="dropdown" href="#">AFC South <span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<a class="submenu" data-toggle="dropdown" href="#">Colts <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Red </li>
</ul>
</li>
</ul>
</li>
<!-- submenu || -->
</ul>
</li>
</ul>
</div>
CSS
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
}
Codepen: Bootstrap 3 dropdown multilevel caret up
Here is what I found to work in testing it, now I just need to write it out dynamically using JS.
<nav class="navbar navbar-default">
<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">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand pull-left" href="#"><img id="logo" src="${pageContext.servletContext.contextPath}/static/images/aston.png"></a>
</div>
<div class="collapse navbar-collapse" id="conference-dropdowns">
<ul class="nav navbar-nav">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">AFC<span class="caret"></span></a>
<ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu">
<li class="dropdown-submenu">
<a tabindex="-1" href="#">AFC South</a>
<ul class="dropdown-menu">
<li>Colts</li>
<li>Jaguars</li>
<li>Titans</li>
<li>Texans</li>
</ul>
</li>
<li class="dropdown-submenu">
<a tabindex="-1" href="#">AFC North</a>
<ul class="dropdown-menu">
<li>Steelers</li>
<li>Ravens</li>
<li>Browns</li>
<li>Bengals</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">NFC<span class="caret"></span></a>
<ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu">
<li class="dropdown-submenu">
<a tabindex="-1" href="#">NFC North</a>
<ul class="dropdown-menu">
<li>Packers</li>
<li>Vikings</li>
<li>Lions</li>
<li>Bears</li>
</ul>
</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input class="form-control" placeholder="Search" type="text">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Logout</li>
</ul>
</div>
</div>
The script generates a header Panel for my webpage which is displayed here:
I want the OcC field to begin at the intersection of vertical and horizontal bar as shown. I am sure a margin: attribute can help me but don't know where to use it. Please help me and thanks.
<header>
<img src="C:/D DRIVE DATA/generic/logo.png" height="43" width="130">
height="43" width="130">
<div class="container">
<div class="row">
<nav class="navbar main-nav navbar-default ">
<div class="navbar-collapse collapse" id="navbar">
<ul class="nav navbar-nav">
<li class="dropdown OcC">
<a class="dropdown-toggle" data-close-others="false" data-delay="100" data-
hover="dropdown" data-toggle="dropdown" href="javascript:;">OcC </a>
</li>
<li class="dropdown CoO ">
<a class="dropdown-toggle" data-close-others="false" data-delay="100" data-
hover="dropdown" data-toggle="dropdown" href="javascript:;">CoO </a>
</li>
<li class="dropdown Fccc">
<a class="dropdown-toggle" data-close-others="false" data-delay="100" data-
hover="dropdown" data-toggle="dropdown" href="javascript:;">Fccc</a>
</li>
<li class="dropdown mpP">
<a class="dropdown-toggle" data-close-others="false" data-delay="100" data-
hover="dropdown" data-toggle="dropdown" href="javascript:;">mpP</a>
</li>
<li class="dropdown iR">
<a class="dropdown-toggle" data-close-others="false" data-delay="100" data-
hover="dropdown" data-toggle="dropdown" href="javascript:;">iR</a>
</li>
<li class="dropdown jko">
<a class="dropdown-toggle" data-close-others="false" data-delay="100" data-
hover="dropdown" data-toggle="dropdown" href="javascript:;">jko</a>
</li></ul></li></ul></div></nav></div></div></header>
my navbar
Hi, this is the code that i have used
<div class="container">
<nav class="navbar navbar-default" id="my-navbar">
<div class="container" style="margin-left:60px; margin-right:60px;">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="">
<div class="nav navbar-nav navbar-left" style="margin-top:15px;">
<img src="images/logostack.gif" alt="logo">
</div>
</a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav navbar-center menu_style" > <!--style="font-size:18px; margin-top:25px;"-->
<!-- LI STANDS FOR LIST-->
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">SOMETHING<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>About Something</li>
<li>Meet the Experts</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Challenges<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Shortcomings</li>
<li>Complications</li>
<li>Stakeholders</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Prevalence<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Statistics </li>
<li>Profile Patient</li>
<li>Burden Economical</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Protocols<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Management Approach</li>
<li>Algorithms & Protocols</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Care<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Non Critical</li>
<li>Critical</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Resource Center<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Modules</li>
<li>Videos </li>
<li>Images </li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Engage <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Post your Query</li>
<li>Experts Council</li>
</ul>
</li>
</ul>
<!--unordered list -->
</div>
</div>
I want to place the menu below the logo without using margin on the ul list (since that will spoil the mobile responsiveness and collapse property of bootstrap) .. instead i want to do it with using row and column functions of bootstrap but since im new to it im not able to make it.. any sort of help really appreciated.. thanks in advance..
I've searched and maybe this will help.
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
Link to article:
Center content in responsive bootstrap navbar
You can still use the margin property to achieve this, however if you want to eliminate the changed margin for collapsed menu bar, you can use CSS Media queries to change the margin back to zero. Ofcourse, there will be a certain screen size, where the navbar changes to collapsable navbar so you will need Media Queries.
#media only screen and (max-width:--px)
{
//your nav-bar code goes here
}
You have to take a row top of the navbar.
<div class="container">
<img src="images/logostack.gif" alt="logo" class="img-responsive col-md-2">
<nav class="navbar navbar-default col-md-10" id="my-navbar">
// Your navbar code
</nav>
</div>
Full code according to your question:
<div class="container">
<img src="images/logostack.gif" alt="logo" class="img-responsive col-md-2">
<nav class="navbar navbar-default col-md-10" id="my-navbar">
<div class="container" style="margin-left:60px; margin-right:60px;">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav navbar-center menu_style" >
<!--style="font-size:18px; margin-top:25px;"-->
<!-- LI STANDS FOR LIST-->
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">SOMETHING<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
About Something
</li>
<li>
Meet the Experts
</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Challenges<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
Shortcomings
</li>
<li>
Complications
</li>
<li>
Stakeholders
</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Prevalence<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
Statistics
</li>
<li>
Profile Patient
</li>
<li>
Burden Economical
</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Protocols<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
Management Approach
</li>
<li>
Algorithms & Protocols
</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Care<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
Non Critical
</li>
<li>
Critical
</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Resource Center<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
Modules
</li>
<li>
Videos
</li>
<li>
Images
</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Engage <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
Post your Query
</li>
<li>
Experts Council
</li>
</ul>
</li>
</ul>
<!--unordered list -->
</div>
</div>
</nav>
</div>
You have to know about Bootstrap Grid.
I got a different problem. My Navbar order is gone backward. So I changed code order to 3-2-1 instead of 1-2-3 for showing 1-2-3. This is my code
<div class="collapse navbar-collapse" id="navbar-ex-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
aria-expanded="false">Hesap <i class="fa fa-caret-down"></i></a>
<ul class="dropdown-menu" role="menu">
<li>
Ayarlar
</li>
<li class="divider"></li>
<li>
<a>Bilgisayara Son Erişim : 22:22:39 - 10.07.2015</a>
</li>
<li>
Çıkış Yap : scrappy#kodevreni.com
</li>
</ul>
</li>
</ul>
<a class="btn btn-link navbar-btn navbar-right">Kayıtlar</a>
<a class="btn btn-link navbar-btn navbar-right">Ekran Görüntüsü</a>
<a class="btn btn-link navbar-btn navbar-right">Yönetim</a>
</div>
I want to make it like this "Yönetim > Ekran Görüntüsü > Kayıtlar > Hesap (dropdown)". But It makes it backward so I changed the code upside down. But the problem is it shows as normal in mobile drop down button...
You can define your a tag float right as like this .
a.btn.btn-link.navbar-btn.navbar-right{float:right;}
<a class="btn btn-link navbar-btn navbar-right">Kayıtlar</a>
<a class="btn btn-link navbar-btn navbar-right">Ekran Görüntüsü</a>
<a class="btn btn-link navbar-btn navbar-right">Yönetim</a>
Hello please check this method it will work
<div class="dropdown">
<a id="dLabel" role="button" data-toggle="dropdown" class="btn btn-primary" data-target="#" href="/page.html">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Yönetim</li>
<li>Ekran Görüntüsü</li>
<li>Kayıtlar</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header"></li>
<ul class="dropdown-menu">
<li>Ayarlar</li>
<li>Kayıtlar</li>
<li>Bilgisayara Son Erişim : 22:22:39 - 10.07.2015</li>
<li>Çıkış Yap : scrappy#kodevreni.com</li>
</ul>
</div>