I have an navigation bar on my website.Where the navigation content exceed a desired limit and I want rest of the content to be shown in overflow-y.
But the issue with this is on hover down the content,it shows the content(must be due to fixing min-height).
Here is the code and FIDDLE
<div id="centernav">
<div id="dropnav">
<ul>
<li id="main">
Menu Item 1
</li>
<li id="main">
Menu Item 2
<ul id="subnav">
<li>sub menu item 1</li>
<li>sub menu item 2</li>
<li>sub menu item 3</li>
<li>sub menu item 4</li>
</ul>
</li>
<li id="main" style="overflow-y:auto; overflow-x:hidden; min-height:300px;>
Menu Item 3
<ul id="subnav">
<li>sub menu item 1</li>
<li>sub menu item 2</li>
<li>sub menu item 3</li>
<li>sub menu item 2</li>
<li>sub menu item 2</li>
<li>sub menu item 2</li>
<li>sub menu item 2</li>
<li>sub menu item 2</li>
<li>sub menu item 2</li>
<li>sub menu item 2</li>
<li>sub menu item 2</li><li>\
sub menu item 2</li>
<li>sub menu item 2</li>
<li>sub menu item 4</li>
</ul>
</li>
<li id="main">
Menu Item 4
<ul id="subnav">
<li>sub menu item 1</li>
<li>sub menu item 2</li>
<li>sub menu item 3</li>
<li>sub menu item 4</li>
</ul>
</li>
</ul>
</div>
</div>
CSS
/* Derived from http://www.devinrolsen.com/pure-css-horizontal-menu/ */
#pagebody {
position: inherit !important;
width: 100%;
}
/* DO NOT EDIT */
#pagebody-inner {
position: inherit !important;
width: 100%;
}
/* DO NOT EDIT */
#alpha, #beta, #gamma, #delta {
display: inline;
/* DO NOT EDIT */
position: inherit !important;
/* DO NOT EDIT */
float: left;
/* DO NOT EDIT */
min-height: 1px;
/* DO NOT EDIT */
}
#centernav {
width: 900px;
/* if you want your nav centered, set this to the width of your container, if you don't want it centered, change this number to 100% */
margin-left: auto;
margin-right: auto;
}
#dropnav {
height:25px;
background:#999;
}
/* Changes the height and bg color of the main menu */
#dropnav ul {
margin:0px;
padding:0px;
}
#dropnav ul li {
display:inline;
float:left;
list-style:none;
margin-left:15px;
position:relative;
height:25px;
width: 150px;
}
/* only edit the last 2 items - sets the width of the main menu */
#dropnav li a {
color:#FFF;
text-decoration:none;
}
/* Changes the link color of items on the main menu */
#dropnav li a:hover {
color:#900;
text-decoration:none;
}
/* Changes the hover color of items on the main menu */
#dropnav li ul {
margin:0px;
padding:0px;
display:none;
position:absolute;
left:0px;
z-index: 99;
top:25px;
background-color:#CCC;
}
/* Only edit the last 2 items - set the top margin and background color of the submenus */
#dropnav li:hover ul {
display:block;
width:150px;
}
/* sets the width of the submenus */
#dropnav li li {
list-style:none;
display:list-item;
}
/* DO NOT EDIT */
#dropnav li li a {
color:#000;
text-decoration:none;
}
/* Changes the link color of items in the submenu */
#dropnav li li a:hover {
color:#900;
text-decoration:none;
}
/* Changes the hover color of items in the submenu */
li#main {
padding-top: 2px;
}
/* Sets the padding of items in the main menu */
Please suggest any scale-able solution for this and if possible remove the default scroll.
Thanks
Your code isn't great as you declare 4 li tags as id='main', these should be a class as ids are unique on a page
if you are just want to remove the scroll bar from Menu 3 the you need to add
'overflow: visible;' to your in-line script
However I would also move this in-line code to you style sheet.
I've updated your fiddle to what I think you want
css:
#pagebody { position: inherit !important; width: 100%; } /* DO NOT EDIT */
#pagebody-inner { position: inherit !important; width: 100%; } /* DO NOT EDIT */
#alpha, #beta, #gamma, #delta {
display: inline; /* DO NOT EDIT */
position: inherit !important; /* DO NOT EDIT */
float: left; /* DO NOT EDIT */
min-height: 1px; /* DO NOT EDIT */
}
#centernav {
width: 900px; /* if you want your nav centered, set this to the width of your container, if you don't want it centered, change this number to 100% */
margin-left: auto ;
margin-right: auto ;
}
#dropnav
{height:25px; background:#999; } /* Changes the height and bg color of the main menu */
#dropnav ul
{margin:0px; padding:0px; }
#dropnav ul li
{display:inline; float:left; list-style:none; margin-left:15px; position:relative; height:25px; width: 150px; } /* only edit the last 2 items - sets the width of the main menu */
#dropnav li a
{color:#FFF; text-decoration:none;} /* Changes the link color of items on the main menu */
#dropnav li a:hover
{color:#900; text-decoration:none;}/* Changes the hover color of items on the main menu */
#dropnav li ul
{margin:0px; padding:0px; display:none; position:absolute; left:0px; z-index: 99; top:25px; background-color:#CCC;} /* Only edit the last 2 items - set the top margin and background color of the submenus */
#dropnav li:hover ul
{display:block; width:150px;} /* sets the width of the submenus */
#dropnav li li
{list-style:none; display:list-item;} /* DO NOT EDIT */
#dropnav li li a
{color:#000; text-decoration:none;} /* Changes the link color of items in the submenu */
#dropnav li li a:hover
{color:#900; text-decoration:none;} /* Changes the hover color of items in the submenu */
li.main {padding-top: 2px;} /* Sets the padding of items in the main menu */
.main { min-height:300px; overflow:visible;}
html:
<div id="centernav">
<div id="dropnav">
<ul>
<li class="main">
Menu Item 1
</li>
<li class="main">
Menu Item 2
<ul id="subnav">
<li>sub menu item 1</li>
<li>sub menu item 2</li>
<li>sub menu item 3</li>
<li>sub menu item 4</li>
</ul>
</li>
<li class="main">
Menu Item 3
<ul id="subnav">
<li>sub menu item 1</li>
<li>sub menu item 2</li>
<li>sub menu item 3</li>
<li>sub menu item 2</li>
<li>sub menu item 2</li>
<li>sub menu item 2</li>
<li>sub menu item 2</li>
<li>sub menu item 2</li>
<li>sub menu item 2</li>
<li>sub menu item 2</li>
<li>sub menu item 2</li><li>\
sub menu item 2</li>
<li>sub menu item 2</li>
<li>sub menu item 4</li>
</ul>
</li>
<li class="main">
Menu Item 4
<ul id="subnav">
<li>sub menu item 1</li>
<li>sub menu item 2</li>
<li>sub menu item 3</li>
<li>sub menu item 4</li>
</ul>
</li>
</ul>
</div>
</div>
Related
I am trying to code this navbar but stuck at this issue where I am unable to extend the background/border of sub-menu as per its text length.
Check screenshot here!
*{margin:0;padding:0}
#navbar{max-width:900px;width:100%;clear:both}
#navbar ul{border-top:#e82424 dashed 1px;border-bottom:#e82424 dashed 1px;background:#eee;width:100%;list-style:none;position:relative;float:left}
#navbar ul a,#navbar ul ul a{display:block;color:#000;text-decoration:none;font-size:16px;padding:5px 10px}
#navbar ul li{position:relative;float:left}
#navbar ul li.current-menu-item{background:#ddd}
#navbar ul li:hover{background:#f6f6f6}
#navbar ul ul{white-space:nowrap;min-width:100%;border:#e82424 dashed 1px;display:none;position:absolute;top:100%;left:0}
#navbar ul ul li{float:none}
#navbar ul ul ul{top:0;left:100%}
#navbar ul li:hover > ul{display:block}
<div id="navbar">
<ul>
<li class="current-menu-item">Menu 1</li>
<li>Menu 2
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2 (Making it little longer)
<ul>
<li>Deep Menu 1</li>
<li>Deep Menu 2</li>
</ul>
</li>
</ul>
</li>
<li>Menu 3
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
</ul>
</li>
<li class="last-menu-item">Menu 4</li>
</ul>
</div>
http://jsbin.com/xogebiv/edit?html,output
I would appreciate any suggestions. Thanks
Change this line:
#navbar ul{
border-top:#e82424 dashed 1px;
border-bottom:#e82424 dashed 1px;
background:#eee;
width:100%;
list-style:none;
position:relative;
float:left
}
to
#navbar > ul{
border-top:#e82424 dashed 1px;
border-bottom:#e82424 dashed 1px;
background:#eee;
width:100%;
list-style:none;
position:relative;
float:left
}
basically, do not apply the width: 100% to all ul's but only the first child.
Here's a working example: http://jsbin.com/suvizoqiwi/1/edit?html,output
How to get those li that have children ul. I want to set CSS to those li. I can't set class because li are dynamically print. When I set CSS as below so it set all parent li to plus.
.ul{
width:200px;
position:relative;
}
.ul li{
position:relative;
}
.ul > li:before{
content : '+';
position: absolute;
top: 0;
right: 7px;
}
<ul class="ul">
<li>List 1</li>
<li>List 2</li>
<li>List 3
<ul>
<li>Sub List 1</li>
<li>Sub List 2</li>
<li>Sub List 3</li>
</ul>
</li>
<li>List item 4</li>
</ul>
This is style for that.
You're very close actually. The trick is to style simply each ul that is inside a .ul. Then move the + to where you want it to appear (i.e. after the first line of the parent li).
.ul {
width: 200px;
position: relative;
}
.ul li {
position: relative;
}
.ul ul::before {
content: '+';
position: absolute;
top: 0;
right: 7px;
}
<ul class="ul">
<li>List 1</li>
<li>List 2</li>
<li>List 3
<ul>
<li>Sub List 1</li>
<li>Sub List 2</li>
<li>Sub List 3</li>
</ul>
</li>
<li>List item 4</li>
</ul>
This is style for that.
You can't do that because in CSS, you don't have a parent selector.
For instance you can't do something like:
ul < li { color: #ddd; }
or even something like:
ul:has(li) { color: #ddd; }
This is because there are a lot of performance issues like re-rendering the page if you have such a parent selector. That's why W3C guys have not added the parent selector tool.
Look here for reading more into it:
Is there a CSS parent selector?
Parent selectors in CSS
I don't know what this is called, so here's an image of what I want to do in an HTML form:
I want to select from a dropdown. As I scroll down the list, I want to show subordinate selections, like you do in this example from Windows. And use that final selection as the input to the form.
Can this be done?
It can be done but most likely you'll have to use a third party library.
This menu is called context menu.
Checkout the library below
http://swisnl.github.io/jQuery-contextMenu/index.html
If you just want to put input in a form then probably it's better to use a simple dropdown.
I guess you want to implement something like this. You will get many codes in google if you simply search for a multilevel drop down navigation menu.
ul
{
list-style:none;
position:relative;
float:left;
margin:0;
padding:0
}
ul a
{
display:block;
color:#333;
text-decoration:none;
font-weight:700;
font-size:12px;
line-height:32px;
padding:0 15px;
}
ul li
{
position:relative;
float:left;
margin:0;
padding:0
}
ul li.active
{
background:#ddd
}
ul li:hover
{
background:#f6f6f6
}
ul ul
{
display:none;
position:absolute;
top:100%;
left:0;
background:#fff;
padding:0
}
ul ul li
{
float:none;
width:200px
}
ul ul a
{
line-height:120%;
padding:10px 15px
}
ul ul ul
{
top:0;
left:100%
}
ul li:hover > ul
{
display:block
}
<nav>
<ul>
<li class="active">Home</li>
<li>Menu 1 ►
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2 ►
<ul>
<li>Sub Sub Menu 1</li>
<li>Sub Sub Menu 2</li>
</ul>
</li>
<li>Sub Menu 3</li>
</ul>
</li>
<li>Menu 2 ►
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
</ul>
</li>
<li>Menu 3</li>
</ul>
</nav>
Fair enough, the suggestion to use the jQuery contextMenu plugin really is not bad. It can handle submenu's for you without a problem and really makes defining the command's quite a lot easier than writing it yourself.
http://swisnl.github.io/jQuery-contextMenu/demo/sub-menus.html
I'm having a bit of difficulty trying to get my drop down (sub-menu) to appear above the content. I have tried z-index and still there is no fix.
Initially the sub-menu starts off with a height of 0 and overflow-hidden (so it isnt shown). I have added JQuery to add a class of open when the parent of the sub menu is clicked. Then I have put a height on. The menu appears fine along with the transition, however the drop down sits below the content and it cannot be clicked.
Can anyone please help?
CSS
.sub-menu{
height:0;
overflow:hidden;
}
.sub-menu li {
width: 100%;
display: block;
clear: both;
border-top:1px solid;
}
.sub-menu, ul.sub-menu, .sub-menu li, ul.sub-menu li{
z-index: 5000;
}
li.sub-menu-parent:hover .sub-menu {
height: 204px;
}
HTML
<div class="col navigation">
<nav>
<ul>
<li class="sub-menu-parent">Menu Item 1
<ul class="sub-menu">
<li class="sub-close">Back</li>
<li>Sub Item 1</li>
<li>Sub Item 1</li>
<li>Sub Item 1</li>
<li>Sub Item 1</li>
</ul>
</li>
<li>Menu Item 2</li>
<li>Menu Item 3</li>
<li>Menu Item 4</li>
<li class="sub-menu-parent">Menu Item 5
<ul class="sub-menu">
<li class="sub-close">Back</li>
<li>Sub Item 5</li>
<li>Sub Item 5</li>
<li>Sub Item 5</li>
<li>Sub Item 5</li>
</ul>
</li>
</ul>
</nav>
</div>
You need to give your element some position before the z-index will kick into action. I'd suggest also adding this to your .navigation divider instead of the li elements:
div.navigation {
position: relative;
z-index: 5000;
}
You should then give a lower z-index to your content just to be on the safe side:
{contentSelector} {
position: relative;
z-index: 1;
}
z-index is not working without position you need to set a position for your element.
.sub-menu, ul.sub-menu, .sub-menu li, ul.sub-menu li{
position:relative;
z-index: 5000;
}
Reference
You won't see the transition, without the position,
you need it relative to affect the div.
..and I did it in a nice little rhyme for you too :)
Have a look at this FIDDLE
Also, because Im in a good mood, I've tweaked into a sample horizontal menu
You need to use:
ul ul{
position:absolute;
}
Without position set to absolute, the content is effectively being injected before the next list item. You dont necessarily need to use z-index for a vertical menu.
I have 2 separate menu's. I want to display the links within menu #2 when hovering over certain buttons on Menu #1. I want to try and do this with CSS if possible. Some of the css I am using is below.
HTML:
<nav>
<ul>
<li>HOME</li>
<li>NEWS</li>
<li>FORUMS</li>
<li>GAMES</li>
<li>XECOM</li>
</ul>
</nav>
<div id="sub-menu-items">
<ul>
<li>Test 1</li>
<li>Test 2</li>
</ul>
</div>
CSS:
#sub-menu-items ul li {
list-style-type: none;
z-index: 99999;
margin-right: 15px;
padding-bottom: 8px;
padding-top: 8px;
display: none;
text-shadow: 2px 3px 3px #080808;
}
nav ul li:first-child:hover #sub-menu-items ul li {
display: inline;
}
how is this not working?
The sub-menu-items need to be a child of the li you are hovering. Thats what this selector means:
nav ul li:first-child:hover #sub-menu-items ul li
CSS drop down menus are done like this:
HTML
<ul>
<li>Parent Item
<ul>
<li>Sub item</li>
<li>Sub item</li>
</ul>
</li>
<li>Parent Item
<ul>
<li>Sub item</li>
<li>Sub item</li>
</ul>
</li>
</ul>
CSS
ul ul {
display: none;
}
ul > li:hover ul {
display: block;
}
You will need to nest the sub-menus within parent 'li'
Your code will be something like this:
<nav>
<ul class="parent-menu">
<li>HOME</li>
<li>NEWS
<ul class="sub-menu">
<li>Test 1</li>
<li>Test 2</li>
</ul>
</li>
<li>FORUMS</li>
<li>GAMES</li>
<li>XECOM</li>
</ul>
</nav>
Then you can style sub-menu ul & li (preferably position:absolute) and css can be:
.parent-menu li:hover .sub-menu { display:block}
The ':hover' state of an element can only affect its child elements. To make use of :hover to affect external elements you can make use of javascript.
The CSS in this line
nav ul li:first-child:hover #sub-menu-items ul li {display: inline;}
is looking for "#sub-menu-items ul li" inside the first "li" of "nav".
Depending on your layout you can achieve the desired effect only if you move the second menu inside the first menu.