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));
Related
How to apply Bootstrap Sidebar & Sidebar collapse Menu
<ul class="nav nav-sidebar">
<li>
<a data-toggle="collapse" href="#collapseTwo" aria-expanded="true" data-parent="#accordion" >
<i class="glyphicon glyphicon-info-sign"></i>
About Us
</a>
</li>
<li>
<ul id="collapseTwo" class="collapse">
<li>
Quote
</li>
<br/>
<li>
About Us Page Content
</li>
</ul>
</li>
</ul>
so How to apply Bootstrap Sidebar & Sidebar only collapse Menu
try this code
html
<ul id="nav">
<li>Home</li>
<li>Products [+]
<ul>
<li>All Products</li>
<li>Product1 [+]
<ul>
<li>Product1</li>
</ul>
</li>
<li>Product2 [+]
<ul>
<li>Product2</li>
</ul>
</li>
</ul>
</li>
<li>Services [+]
<ul>
<li>Service 1</li>
<li>Service 2</li>
<li>Service 3</li>
</ul>
</li>
<li>Support</li>
<li>Contact</li>
</ul>
demo
I'm working on a menu system that has a horizontal menu bar with pop-out menus when hovering over each of the options. What I would like to see happen is that when you hover over a menu option, there is no wrapping of top-level sub options. If I define a static width for this content it works, nothing wraps, but this looks poorly designed for the menus with less content as there's unnecessary white space. If I add a white-space nowrap the content no longer wraps but the "container" UL doesn't automatically size to the correct size of the content that is contained within it when inline-block formatted (this is the iteration that is linked below). I would like to go with a nowrap solution where the parent UL for each LI menu is sized automatically so that i don't enforce an over sized boundary that has excess white space.
The menu is below:
<div class="container">
<ul id="nav">
<li>Home</li>
<li>generic
<span id="s1"></span>
<ul class="subs">
<li>generic</li>
<li>generic 1
<ul>
<li>generic 1</li>
<li>generic 2</li>
<li>generic 3</li>
<li>generic 4</li>
<li>generic 5</li>
</ul>
</li>
<li>Week 2
<ul>
<li>Day 1</li>
<li>Day 2</li>
<li>Day 3</li>
<li>Day 4</li>
<li>Day 5</li>
</ul>
</li>
<li>Week 3</li>
<li>Week 4</li>
<li>Continual Education</li>
</ul>
</li>
<li>generic
<span id="s2"></span>
<ul class="subs">
<li>generic
<ul>
<li>generic</li>
<li>generic</li>
<li>generic</li>
</ul>
</li>
<li>Tech
<ul>
<li>generic</li>
<li>generic</li>
<li>generic</li>
<li>generic</li>
<li>generic</li>
<li>generic</li>
</ul>
</li>
<li>generic
</li>
<li>generic
</li>
</ul>
</li>
<li>generic
<span id="s3"></span>
<ul class="subs">
<li>generic</li>
<li>generic</li>
<li>generic</li>
<li>generic</li>
<li>generic</li>
</ul>
</li>
<li>generic
<span id="s4"></span>
<ul class="subs">
<li>generic
<ul>
<li>generic</li>
<li>generic</li>
<li>generic</li>
</ul>
</li>
<li>generic</li>
<li>generic</li>
</ul>
</li>
<li>generic</li>
<li>generic/generic/generic</li>
<li>generic
<span id="s5"></span>
<ul class="subs">
<li>generic</li>
</ul>
</li>
</ul>
</div>
I'm linking the whole project via JSFidle because it's just too much to put here and there's linked content. Make note in the running version in JSFiddle that when you hover over a menu the black border (which is the box, in the final version it will just be a basic drop shadow) in most of the sub menus is smaller than the content - this is what I'm trying to solve.
JSFiddle Project
If you can help I greatly appreciate it!
Didn't find an answer here that matches quite my scenario, but have tried to consider answers for similar questions - to no avail.
In your #nav ul.subs > li class, you are setting side padding relatively with %.
Changing this to absolute value in px has fixed the problem - saved to your fiddle.
I am using Jasny Bootstrap for my responsive website. However, the links for the sub-navigations does not work on mobile. I am able to click into the links when I test it on my desktop. But when I test it on my phone, it only closes the navigation side bar. Following is my code:
<!--mobile nav-->
<nav id="mob-nav" class="navmenu navmenu-inverse navmenu-fixed-right offcanvas" role="navigation">
<ul class="nav navmenu-nav">
<li class="active"><span>Home</span></li>
<li class="dropdown"><span>Courses</span> <b class="caret"></b>
<ul class="dropdown-menu navmenu-nav" role="menu">
<li class="dropdown">Sub Nav 1</li>
<li class="divider"></li>
<li class="dropdown">Sub Nav 2</li>
<li class="divider"></li>
<li class="dropdown">Sub Nav 3</li>
<li class="divider"></li>
<li class="dropdown">Sub Nav 4</li>
</ul>
</li>
<li>Navigation 2</li>
<li>Navigation 3</li>
<li>Navigation 4</li>
<li>Navigation 5</li>
</ul>
</nav>
<!--end mobile nav-->
Could it be a case of clashing js?
Edit: I did some trial and error and found that the class "navmenu-nav" is causing the problem. But I am still unsure how I can debug this.
These are the only js attached:
<script src="js/1.11.0/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/jasny-bootstrap.js"></script>
<script src="js/readmore.js"></script>
Just found the answer!
Add: .navmenu-nav.dropdown-menu { position:relative; } to your CSS and like magic, it will work!
Is there a way to extend this designmodo example to allow for 3 levels of navigation?
I’d very much like to use this menu example, but I can’t figure out how to add a third level of functionality. Any help would be greatly appreciated!
Example:
http://designmodo.com/css3-accordion-menu/
Here is a fiddle that i'm working with: http://jsfiddle.net/johnstonian/r5rEZ/
Here is a sample menu i'm working with:
<ul class="accordion">
<li id="one" class="files">
My Files<span>495</span>
<ul class="sub-menu">
<li id="five">
<em>01</em>Dropbox<span>42</span>
<ul class="sub-menu">
<li><a><em>01</em>3rd Level<span>9</span></a></li>
<li><em>02</em>3rd Level<span>14</span></li>
<li><em>03</em>3rd Level<span>3</span></li>
</ul>
</li>
<li><em>02</em>Skydrive<span>87</span></li>
<li><em>03</em>FTP Server<span>366</span></li>
<li><em>01</em>Dropbox<span>42</span></li>
</ul>
</li>
<li id="two" class="mail">
Mail<span>26</span>
<ul class="sub-menu">
<li><em>01</em>Hotmail<span>9</span></li>
<li><em>02</em>Yahoo<span>14</span></li>
<li><em>03</em>Gmail<span>3</span></li>
</ul>
</li>
<li id="three" class="cloud">
Cloud<span>58</span>
<ul class="sub-menu">
<li><em>01</em>Connect<span>12</span></li>
<li><em>02</em>Profiles<span>19</span></li>
<li><em>03</em>Options<span>27</span></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>
Use a menu designed for this, such as:
CSSPlay: Multi-Level Flyout Menu
CSSPlay: A cross-browser drop-down cascading validating menu
CSSPlay: The ULTIMATE CSS only drop-down menu
Code:
<div class="menu">
<ul class="top_thing">
<li class="one_one">Services</li>
<ul class="the_one">
<li class="second">Language 1</li>
<li class="second">Language 2</li>
<li class="second">Language 3</li>
<li class="second">Language 4</li>
<li class="second">Language 5</li>
</ul>
<li class="one_one">About Us</li>
<li class="one_one">Contact</li>
</ul>
</div>
For CSS: I am using display:none on .the_one. Now once the services tab is hovered I want to then display .the_one. How can I do this? I tried doing:
li.the_one:hover {
display:block;
}
But that doesn't work either.
Your HTML is not valid. <ul> must have only <li> as children (and that includes other <ul>. Once you fix that, add these rules:
.the_one {
display: none;
}
.one_one:hover .the_one {
display: block;
}
http://jsfiddle.net/xvEvj/
You need to target the the inner list in your css to make it appear.
Change your css as below:
li.the_one:hover ul.the_one
{
display:block
}
the "li.the_one:hover" states that this will occur when the li with the class "the_one" is hovered over, then it applies a display:block to the ul with the class "the_one" inside the list item with the class "the_one".
Hope this helps.
Cheers.
Your HTML is not valid.
<div class="menu">
<ul class="top_thing">
<li class="one_one">Services
<ul class="the_one">
<li class="second">Language 1</li>
<li class="second">Language 2</li>
<li class="second">Language 3</li>
<li class="second">Language 4</li>
<li class="second">Language 5</li>
</ul>
</li>
<li class="one_one">About Us</li>
<li class="one_one">Contact</li>
</ul>
The second unordered list should rest within a list item of the first unordered list.