Can anybody suggest what I am missing in below html to add submenu to bootstrap dropdown?
<div class="btn-group" uib-dropdown>
<button id="split-button" type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger" uib-dropdown-toggle>
<span class="caret"></span>
<span class="sr-only">Split button!</span>
</button>
<ul class="uib-dropdown-menu" role="menu" aria-labelledby="split-button">
<li><a ui-sref="a">a</a></li>
<li><a ui-sref="b">b</a></li>
<li><a ui-sref="c">c</a></li>
<li><a ui-sref="d">d</a></li>
<li class="dropdown-submenu">
e
<ul class="dropdown-menu">
<li><a ui-sref="e1">e1 (sub of e)</a></li>
</ul>
</li>
</ul>
</div>
EDIT 1
Added plunker
Because uibDropDown directive restricted to attribute.
You should write
<ul uib-dropdown-menu="" role="menu" aria-labelledby="split-button">
Related
How to take advantage of bootstrap javascript functionality with custom html markup, for example I have this html markup for dropdown menus
<div class="dropdown">
<button class="button button-success" id="dropdownButtonExample" data-toggle="dropdown" type="button" aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
<ul class="dropdown-list" aria-labelledby="dropdownButtonExample">
<li class="dropdown-item"><a class="dropdown-link" href="#">Dropdown item 1</a></li>
<li class="dropdown-item"><a class="dropdown-link" href="#">Dropdown item 1</a></li>
<li class="dropdown-item"><a class="dropdown-link" href="#">Dropdown item 1</a></li>
</ul>
</div>
and I want to target the functionality of bootstrap dropdown;
I have this piece of code of dropdown,
like this there are more than 1 dropdown,
from which i want to get the name of each drop down and its selected value
<div style="display: inline-block;" class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Front-Desk<span class="caret"></span></button>
<ul class="dropdown-menu">
<li> 0</li>
<li> 1</li>
<li> 2</li>
<li> 3</li>
<li> Empty Values</li>
</ul>
</div>
for example: for the above code angularjs should return me 'Front-Desk' with its selected value '2'(say).
If there is solution from JQuery then also i would really appreciate the help.
I think I understood what you want, so your html code should be like below:
<div style="display: inline-block;" class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" ng-click="name='Back-Desk'">Back-Desk<span class="caret"></span></button>
<ul class="dropdown-menu ">
<li ng-click="getValue(0)"><a><span> 0</span></a></li>
<li ng-click="getValue(1)"><a><span> 1</span></a></li>
<li ng-click="getValue(2)"><a><span> 2</span></a></li>
<li ng-click="getValue(3)"><a><span> 3</span></a></li>
<li ng-click="getValue('Empty Values')"><a><span> Empty Values</span></a></li>
</ul>
</div>
and your controller should contain this function
$scope.getValue = function(value) {
console.log("this is value:",$scope.name, value);
}
Hello I think you are new in angular btw:
<div style="display: inline-block;" class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Front-Desk<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><span ng-model="value"> 0</span></li>
<li><span ng-model="value"> 1</span></li>
<li><span ng-model="value"> 2</span></li>
<li><span ng-model="value"> 3</span></li>
<li><span ng-model="value"> Empty Values</span></li>
</ul>
</div>
In controller you have to declare a variable "$scope.value" in which your selected value will come.
I am facing the issue in when i click on the icon bar the drop down menu opens and then when i click on the another menu (Alumini menu ) ,the iconbar's drop down menu is not closed but both the alumini menu and the icon bars dropdown menu is viewed.I don't know why the iconbar's drop down menu is not closed while clicking the alumini menu.
The html code for design is uploaded below.
<div class="join">
<!-- Nav Starts -->
<nav class="navbar navbar-default container-fluid wrap">
<div class="container pos-relative">
<div class="navbar-header">
<ul class="new pull-left">
<li class="old"> <img class="img-responsive" src="<?php bloginfo( 'template_url' ); ?>/images/skv-logo-100px.png"></img> </li>
<li> <a class="navbar-brand create hidden-xs" href="http://localhost/wordpress">SKV Vidhyaashram</a> </li>
</ul>
<ul class="nav navbar-nav navbar-main pull-left hidden-xs">
<li>News & Events</li>
<li>Toppers</li>
<li>Achievements</li>
<li>ISA Activities</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Alumni</a>
<ul class="dropdown-menu alumni-menu">
<li>Alumni Home</li>
<li>Committee Members</li>
<li>Gallery</li>
<!-- <li>Events</li> -->
</ul>
</li>
<li><a class="user-icon" href="http://dev.seyali.com/alumni_demo/public/login" data-toggle="tooltip" data-placement="right" title="Login"> <span class="glyphicon glyphicon-user"></span></a></li>
</ul>
<button type="button" class="quicklinkbar-toggle collapsed pull-right" data-toggle="collapse" data-target="#quicklinkbar" aria-expanded="false" aria-controls="quicklinkbar">
<span class="sr-only">Toggle navigation</span>
</button>
<button type="button" class="navbar-toggle collapsed pull-right" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href=""> About Us<span class="glyphicon glyphicon-menu-right pull-right"></span></a>
<ul class="dropdown-menu">
<li>Chairman's Notes</li>
<li>Mission & Vision</li>
<li>Principal's Notes</li>
</ul>
</li>
<li class="dropdown list">
<a class="dropdown-toggle" data-toggle="dropdown" href=""> Academics<span class="glyphicon glyphicon-menu-right pull-right"></span></a>
<ul class="dropdown-menu">
<li>CBSE Circular</li>
<li>Academic Objectives</li>
<li>CBSE & Afflitation</li>
<li>Grades Prekg to X</li>
<li>Innovative Teaching Methods</li>
<li>Labs & Library</li>
<li>Prekg,Juniorkg & Seniorkg</li>
<li>School Terms & Curriculum</li>
</ul>
</li>
<li class="dropdown list1">
<a class="dropdown-toggle" data-toggle="dropdown" href=""> Beyond-Academics<span class="glyphicon glyphicon-menu-right pull-right"></span></a>
<ul class="dropdown-menu">
<li>Co-curricular</li>
<li>Extra-curricular</li>
<li>Life at SKV</li>
</ul>
</li>
<li class="dropdown list2">
<a class="dropdown-toggle" data-toggle="dropdown" href=""> Sports & Games<span class="glyphicon glyphicon-menu-right pull-right"></span></a>
<ul class="dropdown-menu">
<li>Sports Activities</li>
<li>Sports Facilities</li>
</ul>
</li>
<li class="dropdown list3">
<a class="dropdown-toggle" data-toggle="dropdown" href=""> Admission Fees<span class="glyphicon glyphicon-menu-right pull-right"></span></a>
<ul class="dropdown-menu">
<li>Registration & Admission</li>
<li>Entrance Examination</li>
<li>Fees & Payment</li>
</ul>
</li>
<li class="dropdown list4">
<a class="dropdown-toggle" data-toggle="dropdown" href=""> Gallery<span class="glyphicon glyphicon-menu-right pull-right"></span></a>
<ul class="dropdown-menu">
<li>Image Gallery 2014-2015</li>
<li>Image Gallery 2016-2017</li>
<li>Video Gallery</li>
</ul>
</li>
<li class="dropdown list5">
<a class="dropdown-toggle" data-toggle="dropdown" href=""> Careers<span class="glyphicon glyphicon-menu-right pull-right"></span></a>
<ul class="dropdown-menu">
<li>Working at SKV</li>
<li>Positions Vacant</li>
<li>General Information</li>
<li>Apply Online</li>
</ul>
</li>
<li>Contact Us</li>
</ul>
</div>
<div id="quicklinkbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a>News & Events</a></li>
<li><a>Toppers</a></li>
<li><a>Achievements</a></li>
<li><a>ISA Activities</a></li>
<li><a>Alumni</a></li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</nav>
<!-- Nav Ends -->
And the image is attached below
In above attached the two menus are apperaing , in that when i click on the icon bar drop down menu o[pens and again when i click on the alumini menu alumini menu opens but iconbars drop down menu is not closed.Please help me how to solve this.
I'm trying to hide html element based on Session Value, using razor or js but i can't. I've tried more than one solution, but no result.
First attempt:
<div class="btn-group">
الخيارات
<a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li style="#(Session[" UserRole "].Equals("2 ") ? "display:none " : "display:block ")">
اعتماد الملاحظات
</li>
<li>
ردود الإدارة
</li>
<li>
تعديل
</li>
</ul>
</div>
Second attempt:
<div class="btn-group">
الخيارات
<a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
#if (Session["UserRole"].ToString().Equals("1")) {
<li>
اعتماد الملاحظات
</li>
}
<li>
ردود الإدارة
</li>
<li>
تعديل
</li>
</ul>
</div>
Any suggestion?
Try below logic, it may work for you
<li style="#(Session["UserRole"].ToString() == "2" ? "display:block" : "display:none")">
Just use an if instead of mixing with the element's style:
<div class="btn-group">
الخيارات
<a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
#if (Session[" UserRole "].Equals("2 "))
{
<li>
اعتماد الملاحظات
</li>
}
<li>
ردود الإدارة
</li>
<li>
تعديل
</li>
</ul>
</div>
I am trying to create a mockup of a website using bootstrap nav dropdowns. I am still new to this and I have read through posts about this and tried various edits, but my dropdown is still not activating when I click it. Any suggestions or pointers would be very appreciated. Thanks!
Link to my jsfiddle: https://jsfiddle.net/allisoncodes/sdywsaf4/10/
HTML:
<div class="dropdown">
<button class="btn btn-default">
<a href="#home">
<icon class="fa fa-home"></icon>
</a>
</button>
<button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Community
<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" href="#" data-toggle="tab">Recent Activity</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" href="#" data-toggle="tab">Member Forum</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" href="#" data-toggle="tab">Member List</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" href="#" data-toggle="tab">Member Groups</a></li>
</ul>
<button class="btn btn-default">
Pet Help</button>
<button class="btn btn-default">Pets For Sale</button>
<button class="btn btn-default">Pets Services</button>
<div class="content">
</div>
</div>
jQuery:
$('[data-toggle=tab]').hover(function (e) {
$(this).click();
});
It turns out that my code was correct, I had just forgotten to include the jQuery CDN. Thanks for the help!