I am using the bootstrap tabmenu but now I want to make it a dropdown menu. I know that bootstrap have native support for this but I want the dropdown to be toggled only if the caret is clicked, if the rest of the menu item area are clicked that should work as an ordinary link. Do anyone know how to do this?
Here is what the code looks like today
jsfiddle-example
<div class="container">
<ul class="nav nav-tabs">
<li class="active">Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Submenu 1-1</li>
<li>Submenu 1-2</li>
<li>Submenu 1-3</li>
</ul>
</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
</div>
Related
Can you please help me with this plunker:
https://plnkr.co/edit/ZDVUBAxMEFnoGV6GfL88?p=info
Not sure why plunker preview view not showing things. Please open a new
window by clicking right top button in preview view, which should show
something.
<div id="wrapper">
<div id="header" class="sticky shadow-after-3 clearfix">
<header id="topNav">
<div class="container">
<div class="navbar-collapse pull-left nav-main-collapse collapse submenu-dark">
<nav class="nav-main">
<ul id="topMain" class="nav nav-pills nav-main">
<li class="dropdown mega-menu">
<!-- PORTFOLIO -->
<a class="dropdown-toggle" href="#">
PORTFOLIO
</a>
<ul class="dropdown-menu">
<li>
<div class="row">
<div class="col-md-5th">
<ul class="list-unstyled">
<li>
<span>GRID</span>
</li>
<li class="dropdown">
<a class="dropdown-toggle" href="#">1 COLUMN</a>
<ul class="dropdown-menu">
<li>SUB COLUMN 0</li>
<li>SUB COLUMN 1</li>
<li>SUB COLUMN 2</li>
<li>SUB COLUMN 3</li>
<li>SUB COLUMN 4</li>
</ul>
</li>
<li>
2 COLUMNS
</li>
<li>
3 COLUMNS
</li>
<li>
4 COLUMNS
</li>
<li>
5 COLUMNS
</li>
<li>
6 COLUMNS
</li>
</ul>
</div>
Mouse hover at GRID > 1 COLUMN, the sub column will pop up below. But this is not as expected. I expect the sub column to appear at right side of '1 COLUMN'. Please see the attached mock up for the expected behaviour. Not sure how to achieve that, please help, thanks!
With my HTML code I have created a dropdown menu within a tab. I need to add content to those individual "tabs" in the dropdown menu. I need help linking those together.
<div class="container">
<ul class="nav nav-tabs">
<li class="active tab_class" style="background: #009933"><a data-toggle="tab" href="#about">About</a></li>
<li class="dropdown">
<a class="dropdown-toggle" style="background: #009933" data-toggle="dropdown" href="#">Teaching
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Submenu 1-1</li>
<li>Submenu 1-2</li>
<li>Submenu 1-3</li>
</ul>
</li>
<li class = "tab_class" style="background: #009933"><a data-toggle="tab" href="#research">Research</a></li>
</ul>
</div>
This is currently what my code looks like creating the tabs. How can I correctly use classes and href to add content to each subtab within? I am thinking I may not have correctly made subtab's active, but i'm also not sure how to go about doing that. I am also using bootstrap within HTML and have that correctly imported.
Any help would be appreciated! Thanks
I am trying to create a cascading view in dropdown menu ->
/myApp/app/views/layouts/includes/_site-header.html.erb
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Level 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><%= link_to "Level 1.0.1", "/some_link/link_level_1_0_1" %></li>
<li class="dropup"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Level1.1<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><%= link_to "Level 1.1", "/some_link/link_level_1_1_1" %></li>
</ul>
</li>
</ul>
</li>
Level 1 (top most level) shows up correct, but Level 1.1 nested dropdown, not shows.
How can I use inline CSS to correct this?
You want to make it Nested Dropdown. Here is really good example.
JSFIDDLE
Source from http://jsfiddle.net/chirayu45/yxkut/16/
HTML:
<div class="dropdown" style="position:relative">
Click Here <span class="caret"></span>
<ul class="dropdown-menu">
<li>
<a class="trigger right-caret">Level 1</a>
<ul class="dropdown-menu sub-menu">
<li>Level 2</li>
<li>
<a class="trigger right-caret">Level 2</a>
<ul class="dropdown-menu sub-menu">
<li>Level 3</li>
<li>Level 3</li>
<li>
<a class="trigger right-caret">Level 3</a>
<ul class="dropdown-menu sub-menu">
<li>Level 4</li>
<li>Level 4</li>
<li>Level 4</li>
</ul>
</li>
</ul>
</li>
<li>Level 2</li>
</ul>
</li>
<li>Level 1</li>
<li>Level 1</li>
</ul>
</div>
JS:
$(function(){
$(".dropdown-menu > li > a.trigger").on("click",function(e){
var current=$(this).next();
var grandparent=$(this).parent().parent();
if($(this).hasClass('left-caret')||$(this).hasClass('right-caret'))
$(this).toggleClass('right-caret left-caret');
grandparent.find('.left-caret').not(this).toggleClass('right-caret left-caret');
grandparent.find(".sub-menu:visible").not(current).hide();
current.toggle();
e.stopPropagation();
});
$(".dropdown-menu > li > a:not(.trigger)").on("click",function(){
var root=$(this).closest('.dropdown');
root.find('.left-caret').toggleClass('right-caret left-caret');
root.find('.sub-menu:visible').hide();
});
});
I am trying to write my article beside my vertical menu, but all my article going inside that menu. I want my menu to be fixed on that page on the left side and all my new articles or any pictures should come on after menu.
MY HTML
<nav id="wrapper-250">
<ul class="accordion">
<li id="one" class="files">
Health Beat
<ul class="sub-menu">
<li><em>01</em>Sub Menu 1
<ul class="sub-sub-menu">
<li><em>a</em>Sub Menu 2</li>
<li><em>b</em>Sub Menu 2</li>
<li><em>c</em>Sub Menu 2</li>
<li><em>d</em>Sub Menu 2</li>
<li><em>e</em>Sub Menu 2</li>
</ul>
</li>
<li><em>02</em>Sub Menu 1</li>
<li><em>03</em>Sub Menu 1</li>
<li><em>04</em>Sub Menu 1</li>
<li><em>05</em>Sub Menu 1</li>
</ul>
</li>
<li id="two" class="mail">
Mail
<ul class="sub-menu">
<li><em>01</em>Hotmail</li>
<li><em>02</em>Yahoo</li>
</ul>
</li>
<li id="three" class="cloud">
Cloud
<ul class="sub-menu">
<li><em>01</em>Connect</li>
<li><em>02</em>Profiles</li>
<li><em>03</em>Options</li>
<li><em>04</em>Connect</li>
<li><em>05</em>Profiles</li>
<li><em>06</em>Options</li>
</ul>
</li>
<li id="four" class="sign">
Sign Out
<ul class="sub-menu">
<li><em>01</em>Log Out</li>
<li><em>02</em>Delete Account</li>
<li><em>03</em>Freeze Account</li>
</ul>
</li>
</ul>
</nav>
<div id="body-part">
<p>
</P>
</div>
http://codepen.io/anon/pen/XbXbqQ
Add a big padding-left to your #body-part:
padding-left: 500px; /* example */
Demo here: http://jsfiddle.net/baLq1d1k/
Or you can do it using jquery if the width of your #wrapper-250 changes:
$("#body-part").css("padding-left", ($("#wrapper-250").width() + 10));
So now I finally got my pill dropdown working but another question then arose - as I use nav-justified to center my navbar, the pills are quite wide and the dropdown is all the way to the left of the pill. Can I center this dropdown in any way?
The JSFiddle looks like this: https://jsfiddle.net/htsda5xo/1/
A snippet of the HTML:
<div class="nav">
<ul class="nav nav-pills nav-justified">
<li class="dropdown">WEBDESIGN <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>HTML 5</li>
<li>CSS 3</li>
<li>Bootstrap 5</li>
</ul>
</li>
<li>DYNAMIC WEBDESIGN</li>
Try this,
.nav-justified>.dropdown .dropdown-menu {
/* top: auto; */
left: 50%;}
Try this
<div class="nav">
<ul class="nav nav-pills nav-justified">
<li class="dropdown">WEBDESIGN <span class="caret"></span>
<ul class="dropdown-menu text-center" role="menu">
<li>HTML 5</li>
<li>CSS 3</li>
<li>Bootstrap 5</li>
</ul>
</li>
<li>DYNAMIC WEBDESIGN</li>