Sorry again but here is my last code and everthing works great except that when i make the jquery the li from 4 to the end moves after the "ul" that i want but i want that li from 4 to the end to move BETWEEN the ul that i want. here is my code:
<nav id="primary_nav">
<ul class="nav" id="nav">
<li id="nav_app_forums" class="left active">Forums</li>
<li id="nav_app_members" class="left ">Members</li>
<li id="nav_app_calendar" class="left ">Calendar</li>
<li id="nav_app_ipchat" class="left ">Chat</li>
<li id="nav_app_ccs" class="left ">Pages</li>
<li id="nav_app_blog" class="left ">Blogs</li>
<li id="nav_app_gallery" class="left ">Gallery</li>
<li id="nav_app_downloads" class="left ">Downloads</li>
</ul>
<ul class="nav">
<li id="nav_other_apps" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" id="more_apps">More <i class="fa fa-caret-down"></i></a>
<ul id="more" class="dropdown-menu" role="menu">
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <i class="fa fa-caret-down"></i></a>
<ul class="dropdown-menu" role="menu">
<li>Extra Link</li>
<li>Extra Link</li>
<li>Extra Link</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</nav>
if( $('#nav li').length > 5 )
{
$('#nav li:gt(3)').insertAfter('<ul id="more" class="dropdown-menu" role="menu">');
}
i need form you the best code that i have to replace the jquery part or "insert after"
so it the li form 4 to the end would go between the desired ul thanks
Use .appendTo() instead of .insertAfter().
Append puts it inside of the open/closing tags, insert puts it outside the tags.
$('#nav li:gt(3)').appendTo('#more');
JS Fiddle
Try this jsfiddle using .wrapInner
$('#nav li:gt(3)').wrapInner('<ul id="more" class="dropdown-menu" role="menu">');
Related
i have created a navbar with some links on it and some links have dropdown links. But now when I am reducing the screen size the navbar collapses but the when expanded the dropdown menu is not working.
This my collapse button code.
<a class="toggle-nav" href="#"><img src="../img/nav.png" /></a>
M Script goes like this
<script>
jQuery(document).ready(function() {
jQuery('.toggle-nav').click(function(e) {
jQuery(this).toggleClass('active');
jQuery('.menu ul').toggleClass('active');
e.preventDefault();
});
});
</script>
My navbar code is:
<div id="logo">
<a href="/" ><img src="../img/3d.png" class="image-responsive"/></a>
</div>
<div id="container">
<nav class="menu">
<ul class="active">
<li class="spots">SPOTS</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">PRODUCTS
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="printers">3D PRINTERS</li>
<li class="scanners">3D SCANNERS</li>
<li class="consumable">FILAMENTS</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">SERVICES
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="printing">PRINTING SERVICES</li>
<li class="printing">3D DESIGNING</li>
<
<li class="printing">3D SCANNING</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">LEARN
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="learn">WORKSHOPS</li>
<li class="learn">GUEST LECTURES</li>
<li class="learn">CORPORATE TRAINING</li>
</ul>
</li>
<li class="learn">CONTACT</li>
</ul>
<a class="toggle-nav" href="#"><img src="../img/nav.png" /></a>
</nav>
</div>
Below is my Html code
<li ng-show="authentication.isAuth" ng-repeat="menu in menuList" class="dropdown">
{{menu.title}} <span class="caret"></span>
<ul class="dropdown-menu">
<li ng-repeat="li in menu.subMenuList">
{{li.title}}
<a class="fa fa-pencil-square-o" href="{{li.stateh}}"></a>
</li>
</ul>
</li>
I want the edit icon to be adjacent to F/R production Report. Not below Production Report.
P.S. I tried display: inline-block; display: inline; but both are not working.
Have you triend to simply place the tag inside the previous tag?
<li ng-show="authentication.isAuth" ng-repeat="menu in menuList" class="dropdown">
{{menu.title}} <span class="caret"></span>
<ul class="dropdown-menu">
<li ng-repeat="li in menu.subMenuList">
{{li.title}} <a class="fa fa-pencil-square-o" href="{{li.stateh}}"> </a>
</li>
</ul>
</li>
Could you please help me to do menu:
I found a link like that
`http://jsfiddle.net/KyleMit/6cu8f43m/`
but it doesn't get full width navbar with a container menu items
In that code also mentioned that details for full-width sub-menu items.
choose the full-width in all the li items. like below:
<li class="dropdown full-width">
<a href="#" class="dropdown-toggle"
data-toggle="dropdown">
Fill Width <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li><a href="#">Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Long
</a></li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
just change the class of outermost div to navbar instead of container.
Or better just use <nav> </nav> instead of outermost <div class="container"> </div>
Try This
JFiddle Demo Here
snippet Example Below
.full-width.dropdown {
position: static;
}
.full-width.dropdown > .dropdown-menu {
left: 0;
right: 0;
position: absolute;
}
.full-width.dropdown > .dropdown-menu > li > a {
white-space: normal;
}
.fill-width.dropdown {
position: static;
}
.fill-width.dropdown > .dropdown-menu {
left: auto;
position: absolute;
}
.fill-width.dropdown > .dropdown-menu > li > a {
white-space: normal;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet"/>
<div class="container">
<div class="navbar navbar-inverse">
<!-- Header -->
<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>
</button>
<a class="navbar-brand" href="#">
Bootstrap 3 Skeleton
</a>
</div>
<!-- Navbar Links -->
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown full-width">
<a href="#" class="dropdown-toggle"
data-toggle="dropdown">
Normal <span class="caret"></span>
</a>
<ul class="dropdown-menu " role="menu">
<li>Action</li>
<li>Another action</li>
<li><a href="#">Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Long
</a></li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
<li class="dropdown full-width">
<a href="#" class="dropdown-toggle"
data-toggle="dropdown">
Full Width <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li><a href="#">Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Long
</a></li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
<li class="dropdown full-width">
<a href="#" class="dropdown-toggle"
data-toggle="dropdown">
Fill Width <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li><a href="#">Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Long
</a></li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<!-- Post Info -->
<div style='position:fixed;bottom:0;left:0; background:lightgray;width:100%;'>
About this SO Question:
<a href='http://stackoverflow.com/q/26147186/1366033'>
How To Restrict Width of Bootstrap 3 Dropdown Menu
</a><br/>
Fork This Skeleton Here:
<a href='http://jsfiddle.net/KyleMit/kcpma/'>
Bootstrap 3 Skeleton
</a><br/>
</div>
I am trying to align the selections in the navbar with the edges of the jumbotron, so that the rapidcodes logo aligns with the edge of the grey box in 'Newest Additions' and the 'login' button aligns with the right edge of the grey box.
See screenshot of current page:
Code:
td {
text-align: left;
vertical-align: central;
padding: 4px;
}
.products {
display: inline-block;
margin: 15px;
}
<nav class="navbar navbar-default" >
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="http://www.rapidcodes.co.uk"><img src="http://www.rapidcodes.co.uk/style/logo.png" width="200" height="25" alt="Logo"/></a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Xbox<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Games</li>
<li>Memberships</li>
<li>Gift Cards</li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">PlayStation<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Games</li>
<li>Memberships</li>
<li>Gift Cards</li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">PC<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Games</li>
<li>Time Cards</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</nav>
Try packing your code inside the external div with the class of 'container'.
<div class="container"><!--Pack your code inside the container-->
<nav class="navbar navbar-default" >
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="http://www.rapidcodes.co.uk"><img src="http://www.rapidcodes.co.uk/style/logo.png" width="200" height="25" alt="Logo"/></a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Xbox<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Games</li>
<li>Memberships</li>
<li>Gift Cards</li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">PlayStation<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Games</li>
<li>Memberships</li>
<li>Gift Cards</li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">PC<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Games</li>
<li>Time Cards</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</nav>
</div><!--end container-->
Your content probably has a container .container. Also wrap your navbar with this.
I am using bootstrap tabs and dropdown with prev next functionality
<div class="row">
<input class="btnPrevious underline" type="button" value="« Previous" />
<input class="btnNext underline" type="button" value="Next »" />
</div>
<div class="tabbable tabs-left">
<ul class="nav nav-tabs" role="tablist" id="myTab">
<!--<li class="active">Before Starting the Application</li>-->
<li class="active dropdown tabdrop"> Before Starting the Application<b class="caret"></b>
<ul class="dropdown-menu dm">
<li class="active">Before Starting the Application
</li>
<li>Who Can Apply?
</li>
</ul>
</li>
<li class="dropdown tabdrop"> <a href="#" role="tab" data-toggle="dropdown" class="dropdown-toggle">
Application Details
<span class="caret"></span>
</a>
<ul class="dropdown-menu dm">
<li>Applicant Details
</li>
<li>Premises Details
</li>
<li>Details of Personal License Holder
</li>
</ul>
</li>
<li>Fees and Payments
</li>
<li>Checklist
</li>
<li>Conditions
</li>
<li>Submit
</li>
<li>Tab 1
</li>
<li>Tab 2
</li>
<li>Tab 3
</li>
<li>Tab 4
</li>
<li>Tab 5
</li>
<li>Tab 6
</li>
<li>Tab 7
</li>
</ul>
</div>
To find anchor tag...for prev next
$('.btnNext').click(function () {
$('.nav-tabs > .active').next('li, li > ul > li').find('a').trigger('click');
});
$('.btnPrevious').click(function () {
$('.nav-tabs > .active').prev('li').find('a').trigger('click');
});
But from the script i didn't find all the anchor tag means anchor tag inside the dropdown (li > ul > li > a )
<li class="dropdown tabdrop"> <a href="#" role="tab" data-toggle="dropdown" class="dropdown-toggle">
Application Details
<span class="caret"></span>
</a>
<ul class="dropdown-menu dm">
<li>Applicant Details
</li>
<li>Premises Details
</li>
<li>Details of Personal License Holder
</li>
</ul>
</li>
I want to find each anchor tag from nav-tabs for prev and next function. Thanks in Advance.
CHK1LAST();
var $tabs = $('.tabbable li');
$('.btnPrevious').on('click', function () {
$tabs.filter('.active').prev('li').find('a[data-toggle="tab"]').tab('show');
CHK1LAST();
});
$('.btnNext').on('click', function () {
if ($tabs.filter('.active').find('ul').length > 0) {
var $bb = $tabs.filter('.active').find('ul');
if ($bb.find('li.active').length > 0) {
if ($bb.find('li.active').index() == (parseInt($bb.find('li').length) - 1)) {
if ($bb.parent('li').next('li').find('li').length > 0)
$bb.parent('li').next('li').find('li').eq(0).find('a[data-toggle="tab"]').tab('show');
else
$bb.parent('li').next('li').find('a[data-toggle="tab"]').tab('show');
}
else
$bb.find('li.active').next('li').find('a[data-toggle="tab"]').tab('show');
}
else
$bb.find('li').eq(0).find('a[data-toggle="tab"]').tab('show');
}
else
$tabs.filter('.active').next('li').eq(0).find('a[data-toggle="tab"]').tab('show');
CHK1LAST();
});