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.
Related
This is a page I'm working on currently: http://s.codepen.io/moletek/debug/QNeaXq And basically I think the sub-menu breaks when you open and close the parent item. The background will disappear, like it's closing both elements.
I've done some custom stuff, so you can view the src, but here is my standard html:
<div class="collapse navbar-collapse" id="stcs-collapse">
<ul class="nav navbar-nav">
<li class="first active"><a href="welcome" title="welcome" >Welcome</a></li>
<li class="dropdown">About
<ul class="dropdown-menu"><li class="first"><a href="about/our-vision" title="Our Vision" >Our Vision</a></li>
<li><a href="about/our-team" title="Our Team" >Our Team</a></li>
<li><a href="about/church-plants" title="" >Plants</a></li>
<li class="last">Contact Us</li>
</ul>
</li>
</ul>
</div> <!-- A summary of the menu structure with submenu
You can reproduce this in the codepen mentioned above. Or view the GIF below So basically whenever you tap the dropdown parent, it will appear fine. But if you tap the parent again, the entire background will disappear when the child items do.
I'm quite baffled! I appreciate any help.
Thanks!
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 have a navigation on my site where the last link opens a modal.
Scrollspy is working fine but I don't want it to highlight the last element that opens the modal in any case.
Is there any way to do so?
<nav>
<ul class="nav">
<li class="current">
Home
</li>
<li>
Leistungen
</li>
<li>
Preise
</li>
<li>
Referenzen
</li>
<li>
Kontakt
</li>
</ul>
</nav>
I've found a solution without adding extra markup, but this is not so beautiful.
The scrollspy highlights the menu item only when the <a> contains the href attribute (at least, in Bootstrap 3.x). So if there's no href, the menu item will never be highlighted.
I've found an extension for the Bootstrap's scrollspy JS to exclude some items ID here, but this is for the 2.x version.
A solution for your problem may be :
<nav>
<ul class="nav">
<li class="current">
Home
</li>
<li>
Leistungen
</li>
<li>
Preise
</li>
<li>
Referenzen
</li>
<li>
<a data-toggle="modal" data-target="#contact">Kontakt</a> <!-- See http://getbootstrap.com/javascript/#modals-usage -->
</li>
</ul>
</nav>
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.