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>
Related
I am using the code from - jsfiddle
And I modified the code similar to -
<body>
<ul>
<li onclick="toggle('Items')"><b>Items</b></li>
<ul id="Items" style="display:none">
<!-- skeleton start -->
<li onclick="toggle('Item1')"><b>Item1</b></li>
<ul id="Item1" style="display:none">
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
</ul>
<li onclick="toggle('Items5')"><b>Items5</b></li>
<ul id="Items5" style="display:none">
<li>Item6</li>
<li>Item7</li>
</ul>
<li onclick="toggle('Items8')"><b>Items8</b></li>
<ul id="Items8" style="display:none">
<li onclick="toggle('Items9')"><b>Items9</b></li>
<ul id="Items9" style="display:none">
<li>Items10</li>
</ul>
<li onclick="toggle('Items11')"><b>Items11</b></li>
<ul id="Items11" style="display:none">
<li>Items12</li>
</ul>
<li>Items13/li>
</ul>
</ul>
</ul>
<ul>
<li onclick="toggle('newitems')"><b>Items-New</b></li>
<ul id="newitems" style="display:none">
<!-- skeleton start -->
<li onclick="toggle('NewItem1')"><b>New Item1</b></li>
<ul id="NewItem1" style="display:none">
<li>NewItem2</li>
<li>NewItem3</li>
<li>NewItem4</li>
</ul>
</ul>
</ul>
</body>
But the problem is that at times it works and at times, it doesn't. I am able to expand collapse Items and sub items properly while sometimes it doesn't respond. I have no clue as why is it not working every time. At times, New Items doesn't expand and at times it does. Any help is much appreciated.
please visit here , click on Java, Environment Setup doesn't seem to work all the time. If you click on Introduction to Java, it starts working.
this element in your page cover your Environment Setup element
<div class="vbox wb_container" id="wb_footer"> </div>
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 problem with a jquery menu. I want one of the the menu links to go to an external site and not a frame within the slides. At present is just opens a blank frame on TEST3.
How would I get it to open an external URL within the same page?
There is a test page located here to understand the issue. http://www.vendvalor.com
<section class="content">
<nav class="main-menu big">
<a data-id="Test1" href="javascript:void(0)">Test1</a>
<a data-id="Test2" href="javascript:void(0)">Test2</a>
<a data-id="Test3" href="http://www.google.com">Test3</a>
<a data-id="Test4" href="javascript:void(0)">Test4</a>
</nav>
I too had the same problem..
Got the solution
<ul id="nav">
<li class="current">Section 1</li>
<li>Section 2</li>
<li>Section 3</li>
<li>Section 4</li>
<li>Section 5</li>
<li>Some other link</li>
The custom.js is
$('#nav').onePageNav({
filter: ':not(.external)'});
It worked.. Via: https://github.com/davist11/jQuery-One-Page-Nav
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>
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.