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
Related
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 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>
nav {float:left;position: relative;}
nav ul {text-align:center;}
nav ul li {float:left;display:inline;}
nav ul li:hover {background:#E6E6E6;}
nav ul li a {display:block;padding:15px 25px;color:#444;}
nav ul li ul {display:block;position:absolute;width:110px;background:#FFF;}
nav ul li ul li {width:110px;}
nav ul li ul li a {display:block;padding:15px 10px;color:#444;}
nav ul li ul li:hover a {background:#F7F7F7;}
nav ul li ul.fallback {display:none;}
nav ul li:hover ul.fallback {display:block;}
<nav>
<ul>
<li>Link 1</li>
<li>
Link 2
<ul class="fallback">
<li>Sub-Link 1</li>
<li>Sub-Link 2</li>
<li>Sub-Link 3</li>
</ul>
</li>
<li>
Link 3
<ul class="fallback">
<li>Sub-Link 1</li>
<li>Sub-Link 2</li>
<li>Sub-Link 3</li>
<li>Sub-Link 4</li>
</ul>
</li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
</ul>
</nav>
http://jsfiddle.net/nkqC8/
So im trying to implement a dropdown nav bar on my new design, but there is this extra space on the left side. I need to remove that otherwise I can't use my fontawesome icons on the navigation menu. So any help with that? Thanks a bunch!
Update line 2 of css to this:
nav ul {text-align:center; padding: 0; }
ul elements have padding left on by default.
I have an HTML structure like this:
<div id="nav">
<ul>
<li>Home</li>
<li>Services Offered</li>
<ul>
<li>Residential</li>
<li>Commercial</li>
<li>Industrial</li>
</ul>
<li>Areas We Service</li>
<li><a id="quote" style="cursor: pointer">Request A Quote</a></li>
</ul>
</div>
and CSS styles like this:
#nav ul ul {
display: none;
}
#nav ul li:hover > ul {
top: 100%;
position: absolute;
display: block;
background: black;
}
The CSS code isn’t allowing the HTML nested <ul> to become visible on hover. I can understand this being a problem if the <ul> is a parent of the preceding <li> but its not, is it? How can I get this working without JS/jQuery?
Thanks!
You have an invalid tag in your markup. ul cannot contain another ul it should be with in li. Apart from this i just fixed css removed top:100% and it looks this way. Not sure hw you wanted it.
Demo
Css
#nav ul ul {
display: none;
}
#nav ul li:hover > ul {
position: absolute; /* Change this to position:relative and your menu will appear beneath its parent.*/
display: block;
background: black;
}
MarkUp Fixed
<div id="nav">
<ul>
<li>Home
</li>
<li>Services Offered
<ul>
<li>Residential
</li>
<li>Commercial
</li>
<li>Industrial
</li>
</ul>
</li>
<li>Areas We Service
</li>
<li><a id="quote" style="cursor: pointer">Request A Quote</a>
</li>
</ul>
</div>
The problem is that the ul element is not contained within the li element that is being hovered over. Try moving the ul element within the 'hovered' li element.
Here's a jsfiddle I created; only moving the ul element to be contained within the li and adding position:relative; to the parent li element: http://jsfiddle.net/BQHyq/1/
If you have any feel questions feel free to make an inquiry - I'd be happy to help.
Try this
Demo(Didn't add a toggle menu header)
Updated Demo
#nav ul li ul {
display: none;
}
#nav ul li:nth-of-type(3):hover ul {
display: block;
}
<div id="nav">
<ul>
<li>Home</li>
<li>Services Offered</li>
<li>Toggle Me
<ul>
<li>Residential</li>
<li>Commercial</li>
<li>Industrial</li>
</ul>
</li>
<li>Areas We Service</li>
<li><a id="quote" style="cursor: pointer">Request A Quote</a></li>
</ul>
</div>
Note: You are having an invalid markup, you cannot nest ul directly
as a child under another ul element, you need to nest another ul
under an li element.
Also note that am purposely using nth-of-type here to select the 3rd li because if you want to nest another list under another li and you don't want to toggle that, than nth-of-type will come in action, else you want to toggle each nested list than using the below piece of selector will work as well
Demo
#nav ul li:hover ul {
display: block;
}
I doubt that you didn't give position: relative; to the parent. And the main issue is, <UL> is not inside <LI>. So :hover will not be triggered. You need to move the UL inside the LI for this.
Why not think of doing something like this. Why not try with this HTML/CSS structure?
HTML
<ul class="nav">
<li>
Menu 1
<ul>
<li>Sub Menu Item</li>
<li>Sub Menu Item</li>
<li>Sub Menu Item</li>
</ul>
</li>
<li>
Menu 2
<ul>
<li>Sub Menu Item</li>
<li>Sub Menu Item</li>
<li>Sub Menu Item</li>
</ul>
</li>
<li>
Menu 3
<ul>
<li>Sub Menu Item</li>
<li>Sub Menu Item</li>
<li>Sub Menu Item</li>
</ul>
</li>
</ul>
CSS
* {font-family: "Segoe UI", Tahoma;}
ul.nav {border-bottom: 1px solid #999;}
ul.nav li a {display: block; text-decoration: none; color: #333; padding: 5px; border: 1px solid #fff;}
ul.nav > li:hover {border: 1px solid #666; border-bottom: 1px solid #fff;}
ul.nav li a:hover {background: #ccc; border: 1px solid #999;}
ul.nav > li {display: inline-block; position: relative; border: 1px solid #fff;}
ul.nav > li ul {display: none; position: absolute; left: -1px; width: 150px; border: 1px solid #666; border-top-color: #fff; margin-top: 1px;}
ul.nav > li:hover ul {display: block;}
ul.nav > li ul li {display: block;} /* Vertical Menu */
ul.nav > li ul li {display: inline-block;} /* Horizontal Menu */
Fiddle: http://jsfiddle.net/vMuxA/ (Vertical Menu) http://jsfiddle.net/vMuxA/1/ (Horizontal 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.