I want to do a dropdown menu vertical with a twitter bootstrap. My dropdown links are a same class CSS. But when I choose one if them, the two dropdown links slide.
Thanks for your help.
<ul class="nav nav-list">
<li class="nav-header">Ac</li>
<li class="nav-header main">Pla
<ul>
<li class="nav-subheader">Qua</li>
<li class="nav-subheader">Qua1</li>
<li class="nav-subheader">Qua2</li>
</ul></li>
<li class="nav-header main">Proj
<ul>
<li class="nav-subheader">Sou</li>
<li class="nav-subheader">Sou1</li>
<li class="nav-subheader">Sou2</li>
<li class="nav-subheader">Sou3</li>
</ul></li>
<li class="nav-header">Cen</li>
<li class="nav-header">Mes</li>
</ul>
You're missing a few key classes and information.
See the jFiddle I've created:
http://jsfiddle.net/KhCrm/
Make sure you have included the relevant JS/CSS (The only 2 needed to make this work really are dropdown.js, and the bootstrap.css.
Related
I'm creating a website for a project and i'm not allowed to use frameworks (so no bootstrap but jquery is allowed.), earlier i had a problem where the navigation bar when collapsed (screen width under 800px) has all the individual links expanded, rather than being in individual categories.
I've now fixed that but i've now got this problem where the menu's wont stay open / the arrows when clicked just take you to the subcategories heading. This makes the site unusable for mobiles essentially as no one will think to long click a tab to open each one.
I've uploaded this website to
here
The Html nav bar
<nav role="navigation" id="cssmenu">
<ul>
<li>Home</li>
<li class="has-sub">Courses
<ul>
<li>Digital Media</li>
<li>Web Development</li>
<li>Journalism</li>
<li class="last">Information & Communications</li>
</ul>
</li>
<li class="has-sub">Facilities
<ul>
<li>Societies</li>
<li>Jobs and Placements</li>
<li class="last">Library</li>
</ul>
</li>
<li class="has-sub active">Manchester & Student Life
<ul>
<li>Travel</li>
<li>Attractions</li>
<li class="last">Nightlife</li>
</ul>
</li>
<li class="has-sub">Student Help
<ul>
<li>Finance</li>
<li>Student Union</li>
<li class="last">Assistance</li>
</ul>
</li>
<li class="last">Contact</li>
</ul>
</nav>
The Jquery script
( function( $ ) {
$( document ).ready(function() {
// Cache the elements we'll need
var menu = $('#cssmenu');
var menuList = menu.find('ul:first');
var listItems = menu.find('li').not('#responsive-tab');
// Create responsive trigger
menuList.prepend('<li id="responsive-tab">Digi-Co</li>');
// Toggle menu visibility
menu.on('click', '#responsive-tab', function(){
listItems.slideToggle('fast');
listItems.addClass('collapsed');
});
});
} )( jQuery );
The css can also be found
here
Any help will be appreciated
Thank you.
I am currently coding a bootstrap website, I am about to finish. but I have one part that I can't accomplish, and its the Side bar,
I have made a bootstrap 3 spy + affix side bar for example:
http://s.bootply.com/render/RpfBuecywd
Imagine that the Side scrollspy menu has another menu after it, that will move when you scroll with you.
I am trying to do something like this:
I am always failing to do that since everytime I create the 2nd menu the menu itself doesn't scroll and the page gets broken..
if any of you guys can help me do that, I will love you for ever. I am trying to do it for the past 30 minutes and I cant think of a way to do it.
Thanks,
Aviv.
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="sidebar-nav-fixed affix">
<div class="well">
<ul class="nav ">
<li class="nav-header">Sidebar</li>
<li class="active">Link
</li>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
</ul>
</div><!--/.well -->
<div class="well">
<ul class="nav ">
<li class="nav-header">Sidebar</li>
<li class="active">Link
</li>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
</ul>
</div><!--/.well -->
</div><!--/sidebar-nav-fixed -->
</div>
</div>
</div>
Here's a similar example: Right and Left Sidebars Fixed
Always include a fiddle of you code when asking questions.
I have found a fix for it, simply opening up a ul inside a ul
example:
<ul class="nav affix">
<li>Something</li>
<li>Something</lI>
<ul class="nav affix-top">
<li>Something 2</li>
<li>Something 2</li>
</ul>
</ul>
I need some help making jQuery click and toggle function being simplified.
JS FIDDLE
This is what I have:
HTML
<div class="category-list-content">
<h4><strong>Category</strong></h4>
<ul class="category-list">
<li class="">
Company
</li>
<li class="">
Industry
</li>
<li class="">
Job Title
</li>
<li class="">
Tenure
</li>
<li class="">
Seniority Level
</li>
</ul>
</div>
ABOVE are my main category list
<div class="category-list-sub-content">
<h4><strong>Sub Category</strong></h4>
<ul class="segmentation-list ">
<p>Company</p>
<li class="">9lenses</li>
</ul>
<ul class="category-list ">
<p>Industry</p>
<li class="">Avation</li>
<li class="">Software</li>
<li class="">Mobile</li>
<li class="">Cars</li>
</ul>
<ul class="category-list">
<p>Job Title</p>
<li class="">UI Developer</li>
<li class="">UX Developer</li>
<li class="">Designers</li>
<li class="">Web Developers</li>
</ul>
<ul class="category-list">
<p>Tenure</p>
<li class=""> 5 years</li>
<li class="">< 5 years</li>
<li class="">> 5 years</li>
<li class="">10 years</li>
<li class="">1 year</li>
</ul>
<ul class="category-list ">
<p>Seniority Level</p>
<li class="">Team Lead</li>
<li class="">Juniour Employee</li>
<li class="">Intern</li>
<li class="">Director</li>
<li class="">CEO</li>
</ul>
</div>
This are sub-category list.
I was wanting to make something like when I click on the Company Sub category of Company will show and other sub-categories remain hidden. and when I click on the Industry , Industry subcategory will show and other will be hidden. Same goes for every category. Something like tab effect. I can do this by adding classes on each categories and sub-categories and giving .show() and .hide() functions. but it will huge to add unique classes. Also I may add more categories and sub categories later. So is there any good way to make this work how I describe ? If you need to alter(add any class or ID) anything to make this work that will be fine.
Any help will be appreciated. I am really suffering with this.
What you can do is setting a #hash in every tag of you category menu like:
<li class="">
Company
</li>
Set the id corresponding on in your "main category list" like :
<ul class="segmentation-list " id="company">
<p>Company</p>
Then set an event on each tag, detect the #hash and show only the right div. A little research on something called the web could have helped you. I'm not gonna give you the complete code, try doing it yourself if you don't want other downvoting your question.
I am using bootstrap sidebar.
Its only two levels sidebar nav on the website. I have added two more levels, now its four level sidebar. I am receiving a random issue
that some time when I click on second nav of same level it doesn't open nor other nav collapse, until and unless I scroll down. Then it starting working back again.
Like in the below ScreenShot. By clicking on 'Alerts' it should open and accessing should collapse but its not. But on scrolling it working fine.
I have added the code. Please do let me know if i can add anything more.
<body data-spy="scroll" data-target=".p8-sidebar" onLoad="fixNavbarIssue()">
<div class="p8-sidebar hidden-print hidden-sm hidden-xs bs-docs-sidebar hidden-print affix" role="complementary">
<ul class="nav p8-sidenav nav-stacked">
<li class="active">
Console
<ul class="nav">
<li class="">Login
</li>
<li class="">Understanding Console
</li>
<li class="">Connected Users
</li>
<li class="">Connected Consoles
</li>
<li class="">Logout
</li>
</ul>
</li>
<li class=""> Alerts
<ul class="nav">
<li class="">
Creating a New Alert
<ul class="nav">
<li>Basic Information
</li>
<li>Send To
</li>
<li>Event Name
</li>
<li class="">Short Message
</li>
<li class="">Long Message
</li>
<li class="">
Require Acknowledgement
</li>
</ul>
Bootstrap css/js are unchanged.
I have a horizontal menu with another horizontal submenu. The problem I have is with styling. I am trying to make it so that when a mainmenu element is activated and the corresponding submenu is shown then the mainmenu elements coloring kind of bleeds to cover the white-space between the two menus as in the following image:
Just to clarify the picture above is a rough image manipulated approximation on what I am searching for.
I am doing this in CMS Made Simple so this is only an approximation of the code:
<nav id="mainmenu">
<ul>
<li>Main Menu 1</li>
</ul>
</nav>
<nav id="submenu">
<ul>
<li>Submenu 1</li>
</ul>
</nav>
Since you have provided no code I have created with a vague idea :
http://jsfiddle.net/FLnke/
<nav id="mainmenu">
<ul>
<li onmouseover="javascript:opensub()" onmouseout="javascript:closesub()" >Main Menu 1 |
<div id="submenu"></br>
<ul>
<li>Submenu 1</li>
<li>Submenu 2</li>
</ul>
</div>
</li>
<li>Main Menu 2</li>
</ul>