I want to design menu like below in picture :-
But I am not able to do it, here is my try :- http://jsfiddle.net/BqqqE/5/
Code Below :-
<div class="dropdown">
<a class="dropdown-toggle btn btn-danger" data-toggle="dropdown" href="#">Dropdown trigger <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li class="dropdown-submenu"><a tabindex="-1" href="index.php">Project</a>
<div class="dropdown-menu">
<div class="container">
<div class="row-fluid">
<div class="span6">
<ul class="unstyled">
<li class="nav-header">Category A </li>
<li>Item A</li>
<li>Item B</li>
</ul>
</div>
<div class="span6">
<ul class="unstyled">
<li class="nav-header">Category A </li>
<li>Item A</li>
<li>Item B</li>
</ul>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
Is above Menu Possible with Bootstrap ?
Thanks
Take a look at this JSFiddle. I've added class dropdown-menu-tworows. You can set width for submenu but it's not necessary.
.dropdown-menu-tworows .span6 {
width: 49%;
display: inline-block;
}
Is this what you wanted?
Related
My navbar dropdown is moving towards the extreme left and also not opening properly after adding this script, when i remove the script and run it like a normal static html page it is running completely fine, Please help if you can, it would save me a lot of time in this
$(function() {
$('#header').load('header.html');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
</script>
</script>
HERE IS HTML OF MY NAVBAR
<header class="header-area">
<div class="main-header-area">
<div class="classy-nav-container breakpoint-off">
<div class="container">
<!-- Classy Menu -->
<nav class="classy-navbar justify-content-between" id="robertoNav">
<!-- Logo -->
<a class="nav-brand" href="#"><img src="./img/core-img/logo.png" alt=""></a>
<!-- Navbar Toggler -->
<div class="classy-navbar-toggler">
<span class="navbarToggler"><span></span><span></span><span></span></span>
</div>
<!-- Menu -->
<div class="classy-menu">
<!-- Menu Close Button -->
<div class="classycloseIcon">
<div class="cross-wrap"><span class="top"></span><span class="bottom"></span></div>
</div>
<!-- Nav Start -->
<div class="classynav">
<ul id="nav">
<li class="active">Home</li>
<li>About Us</li>
<li>Products
<ul class="dropdown">
<li>Item
<ul class="dropdown">
<li>Dropdown</li>
<li>Dropdown</li>
<li>Dropdown</li>
</ul>
</li>
<li>-Double Width Tower
<ul class="dropdown">
<li>Dropdown</li>
<li>Dropdown</li>
</ul>
</li>
<li>Item</li>
<li>Item
<ul class="dropdown">
<li>dropdow</li>
<li>dropdown</li>
<li>dropdown</li>
</ul>
</li>
<li>-other accessories
<ul class="dropdown">
<li>dropdown</li>
</ul>
</li>
</ul>
</li>
<li>Ladders
<ul class="dropdown">
<li>dropdown</li>
<li>dropdown</li>
<li>dropdown</li>
</ul>
</li>
<li>Accessories
<ul class="dropdown">
<li>- dropdown</li>
<li>- dropdown Item</li>
<li>- dropdown</li>
</ul>
</li>
<li>Contact</li>
</ul>
</div>
<!-- Nav End -->
</div>
</nav>
</div>
</div>
</div>
</header>
Here is my website: http://lowandheavy.com
The problem is that when website opens in mobile the 2nd menu with name "women" not working like menu "men".
It opens the dropdown but redirecting immediately to the submenu 3. Here is the code:
<ul class="nav-menu navigation-tier navigation-tier-primary" data-navigation-tier-primary>
<li class="has-slide-out header-navigation-item navigation-item-primary">
<a class="navigation-link-primary" href="/" >Home</a>
</li>
<li class="dropdown has-slide-out header-navigation-item navigation-item-primary">
<a class="dropbtn navigation-link-primary" href="#">Men</a>
<div class="dropdown-content">
Tanks
T-shirts
</div>
</li>
<li class="dropdown has-slide-out header-navigation-item navigation-item-primary">
<a class="dropbtn navigation-link-primary" href="#">Women</a>
<div class="dropdown-content">
Leggings
Tanks
T-shirts
V-Neck
Unisex Tees
</div>
</li>
<li class="has-slide-out header-navigation-item navigation-item-primary">
<a class="navigation-link-primary" href="/hats/" >Hats</a>
</li>
<li class="has-slide-out header-navigation-item navigation-item-primary">
<a class="navigation-link-primary" href="/about/" >About</a>
</li>
<li class="has-slide-out header-navigation-item navigation-item-primary">
<a class="navigation-link-primary" href="/contact-us/" >Contact</a>
</li>
<li class="has-slide-out header-navigation-item navigation-item-primary">
<a class="navigation-link-primary" href="/news-feed/" >News</a>
</li>
</ul>
Lets DO the same on click
/***Add css in file***/
.dropdown.active .dropdown-content {
display: block;
}
/***Add Jquery in file***/
$('.navigation-link-primary').click(function(e){
$('.dropdown').removeClass('active');
$(this).parent().addClass('active');
});
By clicking on the menu name Men then same time click on menu name women you are facing issue that its not staying its redirecting
It is not the issue
It is happening because when you click on menu "Men" It opens a submenu of Men. then same time clicking on woman submenu of woman open and submenu of "Men" close so gap reduce between Men and Woman in directly you clicked upon one of the submenu of "Woman" (Maybe 2nd or 3rd submenu) not clicked upon the "Woman" menu and you are getting redirected.
Check below snippet
<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.1/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<nav>
<ul class="nav">
<li>Link 1</li>
<li>Link 2 (toggle)
<ul class="nav collapse" id="submenu1" role="menu" aria-labelledby="btn-1">
<li>Link 2.1</li>
<li>Link 2.2</li>
<li>Link 2.3</li>
</ul>
</li>
<li>Link 3 (toggle)
<ul class="nav collapse" id="submenu2" role="menu" aria-labelledby="btn-1">
<li>Link 3.1</li>
<li>Link 3.2</li>
<li>Link 3.3</li>
</ul>
</li>
<li>Link 4</li>
<li>Link 5</li>
</ul>
</nav>
If you are directly open "woman" menu then you will not see your issue because at that time Submenu of "Men" menu is not open
$('.dropbtn.navigation-link-primary').click(function(e){
if($(this).hasClass('active')) {
$("a.dropbtn.navigation-link-primary").removeClass('active');
}
else {
$(this).addClass('active');
}
});
#media(max-width:850px) {
.dropdown:hover .dropdown-content {
display: none !important;
}
body.home .main-header-menu .header-navigation-item a {
width: 100% !important;
display: inline-block;
}
a.dropbtn.navigation-link-primary.active+div {
display: block !important;
}
}
I have the following code to create a drop down menu. However, on any page that has an embedded PDF the drop down appears behind the PDF. It only seems to happen in IE. Is there any fix?
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="index.php">Website</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Option 1
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Option 2
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
</div>
</nav>
Here's my code for the embedded PDF also:
<object data="file.pdf" id="myDoc" type="application/pdf" width="100%" height="1000px">
alt : HowToCopyADisc.pdf
</object>
I'm quite affine with Foundation 5 and now I'm trying to use Foundation 6 as my standard. But I've go a problem with the Responsive Toggle (Navigation). As you can see here, the mobile navigation is always visible and got no content.
This is my HTML:
Menu
<div class="top-bar" id="main-navigation">
<div class="top-bar-left">
<ul class="dropdown menu" data-dropdown-menu>
<li class="menu-text">Site Title</li>
<li class="has-submenu">
One
<ul class="submenu menu vertical" data-submenu>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</li>
<li>Two</li>
<li>Three</li>
</ul>
</div>
<div class="top-bar-right">
<ul class="menu">
<li><input type="search" placeholder="Search"></li>
<li><button type="button" class="button">Search</button></li>
</ul>
</div>
</div>
You are not adding foundation's default js and css file. First you need to add that properly.
Yet you can try below css
.dropdown.menu .has-submenu:hover .submenu {
display:block;
}
I hope it will helps you.
This should work for you:
<div class="title-bar" data-responsive-toggle="example-menu" data-hide-for="medium">
<button class="menu-icon" type="button" data-toggle></button>
<div class="title-bar-title">Menu</div>
</div>
<div class="top-bar" id="example-menu">
<div class="top-bar-left">
<ul class="dropdown menu" data-dropdown-menu>
<li class="menu-text">Site Title</li>
<li class="has-submenu">
One
<ul class="submenu menu vertical" data-submenu>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</li>
<li>Two</li>
<li>Three</li>
</ul>
</div>
<div class="top-bar-right">
<ul class="menu">
<li><input type="search" placeholder="Search"></li>
<li><button type="button" class="button">Search</button></li>
</ul>
</div>
</div>
I have a nav list with bootstrap for a mobile site and i can collapse and expand sections if i click the icon twice but when i click on a button the correct section collapses but when i click on a second button both sections stay open. I want the first one to close when i click on the second button.
Here is an example http://jsfiddle.net/MgcDU/2219/ .
<div class="navbar navbar-fixed-top visible-phone" style="margin-bottom: 0px;">
<div class="navbar-inner">
<div >
<ul class="nav ">
<li class="">
<i class="icon-filter"></i>
</li>
<li class="">
<i class="icon-plus"></i>
</li>
</ul>
</div>
<div class="nav-collapse nav-collapse-filter collapse">
<ul class="nav">
<li class="divider"></li>
<li class="nav-header">Filter By</li>
<li class="">Filter1</li>
<li class="">Filter2</li>
<li class="">Filter3</li>
<li class="">Filter4</li>
<li class="">Filter5</li>
<li class="">Filter6</li>
</ul>
</div>
<div class="nav-collapse nav-collapse-post collapse">
<ul class="nav">
<li class="divider"></li>
<li class="nav-header">Post something</li>
<li class="">Post1</li>
<li class="">Post2</li>
<li class="">Post3</li>
<li class="">Post4</li>
<li class="">Post5</li>
</ul>
</div>
Thanks.
You have to do some manual work I think to achieve that behaviour.
$("a[data-target='.nav-collapse-post']").click(function () {
$(".nav-collapse-filter").collapse("hide");
$(".nav-collapse-post").collapse('toggle');
});
$("a[data-target='.nav-collapse-filter']").click(function () {
$(".nav-collapse-post").collapse('hide');
$(".nav-collapse-filter").collapse("toggle");
});
And also remove the class collapse from nav-collapse-post and nav-collapse-filter if you don't want a strange behaviour on the first click.
Result: http://jsfiddle.net/ngHnh/