Menu 3 levels only horizontal HTML/CSS/JavaScript + pushcontent - javascript

I'm trying to make a 3 levels ul li menu that take 100% width of the container but children ul goes under the parent level.
This is a screen what i'm trying to achieve.
#fakeheader,
#fakecontent{
width:100%
height:50px;
background:red;
position:relative
}
#nav {position: relative;}
#nav li {
list-style:none;
float: left;
}
#nav li a {
display: block;
padding: 8px 12px;
text-decoration: none;
}
#nav li a:hover {
background-color:red;
color:#FFF;
opacity:1;
}
/* Targeting the first level menu */
#nav {
min-width:850px;
background:#fff;
opacity:0.5;
display: block;
height: 34px;
z-index: 100;
position: relative;
}
#nav > li > a {
}
/* Targeting the second level menu */
#nav li ul {
color: #333;
display: none;
position: absolute;
width:850px;
}
#nav li ul li {
display: inline;
}
#nav li ul li a {
background: #fff;
border: none;
line-height: 34px;
margin: 0;
padding: 0 8px 0 10px;
}
#nav li ul li a:hover {
background-color:red;
color:#FFF;
opacity:1;
}
/* Third level menu */
#nav li ul li ul{
top: 0;
}
ul.child {
background-color:#FFF;
}
/* A class of current will be added via jQuery */
#nav li.current > a {
background: #f7f7f7;
float:left;
}
/* CSS fallback */
#nav li:hover > ul.child {
left:0;
top:34px;
display:inline;
position:absolute;
text-align:left;
}
#nav li:hover > ul.grandchild {
display:block;
}
<div id="fakeheader">Test
</div>
<ul id="nav">
<li>
Products
<ul class="child">
<li>Speakers
<ul class="child">
<li>10 watt</li>
<li>20 watt</li>
<li>30 watt</li>
</ul>
</li>
<li>Speakers
<ul class="child">
<li>10 watt</li>
<li>20 watt</li>
<li>30 watt</li>
</ul>
</li>
</ul>
</li>
<li>
Products
<ul class="child">
<li>Speakers
<ul class="child">
<li>10 watt</li>
<li>20 watt</li>
<li>30 watt</li>
</ul>
</li>
<li>Speakers
<ul class="child">
<li>10 watt</li>
<li>20 watt</li>
<li>30 watt</li>
</ul>
</li>
</ul>
</li>
</ul>
<div id="fakecontent">
test
</div>
Also is it possible then to push the content that will be under the menu?
Thanks in advance for any help and sorry for my bad english :P
Regards


Just add some styles:
#main-menu ul {
display: block;
list-style: none;
position: relative;
}
#main-menu > ul li ul {
position: absolute;
bottom: -100%;
left: 0;
width: 100%;
display: none;
}
#main-menu > ul li:hover > ul {
display: block;
color: red;
}

Related

Pure css dropdown menu's submenu with scroller not showing the multidropdown menu

I am using the pure css dropdown menu in one of my project. The submenu contains the multiple lists just like in the snippet:
/*Set the parent <li>’s CSS position property to ‘relative’.*/
ul {
list-style: none;
padding: 0;
margin: 0;
background: #ce4040;
border: 1px solid #e08d8d;
}
ul>li {
border-left: 1px solid #e08d8d;
}
ul li {
display: block;
position: relative;
float: left;
background: #ce4040;
border-bottom: 1px solid #e08d8d;
}
/*The CSS to hide the sub menus.
*/
li ul {
display: none;
}
ul li a {
display: block;
padding: 1em;
text-decoration: none;
white-space: nowrap;
color: #fff;
}
ul li a:hover {
background: #ce4040;
}
/*Displays the dropdown menu on hover.*/
li:hover > ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
}
li:hover a {
background: #ce4040;
}
li:hover li a:hover {
background: #962e2e;
color: #fff;
}
.main-navigation li ul li {
border-top: 0;
}
/*Displays second level dropdown menus to the right of the first level dropdown menu.*/
ul ul ul {
left: 100%;
top: 0;
}
/*Simple clearfix.*/
ul:before,
ul:after {
content: " ";
/* 1 */
display: table;
/* 2 */
}
ul:after {
clear: both;
}
<ul class="main-navigation">
<li>Home
</li>
<li>Front End Design
<ul>
<li>HTML
</li>
<li>CSS
<ul>
<li>Resets
</li>
<li>Grids
</li>
<li>Frameworks
<ul>
<li>Bootstrap
</li>
<li>Foundation
</li>
<li>Sass
</li>
<li>Less
<ul>
<li>Bootstrap
</li>
<li>Foundation
</li>
<li>Sass
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>JavaScript
<ul>
<li>Ajax
</li>
<li>jQuery
</li>
</ul>
</li>
</ul>
</li>
<li>WordPress Development
<ul>
<li>Custom Post Types
<ul>
<li>subPortfolios
</li>
<li>subTestimonials
</li>
<li>subPortfolios
</li>
<li>subTestimonials
</li>
</ul>
</li>
<li>Themes
</li>
<li>Plugins
</li>
<li>Themes
</li>
<li>Plugins
</li>
<li>Themes
</li>
<li>Plugins
</li>
<li>Options
</li>
<li>Options
</li>
<li>Themes
</li>
<li>Plugins
</li>
<li>Options
</li>
<li>Options
</li>
</ul>
</li>
<li>About Us
</li>
</ul>
And tried to place scroller like this by additon of css:
li:hover > ul {
display: block;
position: absolute;
max-height:250px;
overflow-y:auto;
}
The result:
/*Set the parent <li>’s CSS position property to ‘relative’.*/
ul {
list-style: none;
padding: 0;
margin: 0;
background: #ce4040;
border:1px solid #e08d8d;
}
ul>li{
border-left:1px solid #e08d8d;
}
ul li {
display: block;
position: relative;
float: left;
background: #ce4040;
border-bottom:1px solid #e08d8d;
}
/*The CSS to hide the sub menus.
*/
li ul { display: none; }
ul li a {
display: block;
padding: 1em;
text-decoration: none;
white-space: nowrap;
color: #fff;
}
ul li a:hover { background: #ce4040; }
/*Displays the dropdown menu on hover.*/
li:hover > ul {
display: block;
position: absolute;
max-height:250px;
overflow-y:auto;
}
li:hover li { float: none; }
li:hover a { background: #ce4040; }
li:hover li a:hover { background: #962e2e; color:#fff;}
.main-navigation li ul li { border-top: 0; }
/*Displays second level dropdown menus to the right of the first level dropdown menu.*/
ul ul ul {
z-index: 9999;
}
/*Simple clearfix.*/
ul:before,
ul:after {
content: " "; /* 1 */
display: table; /* 2 */
}
ul:after { clear: both; }
<ul class="main-navigation">
<li>Home</li>
<li>Front End Design
<ul>
<li>HTML</li>
<li>CSS
<ul>
<li>Resets</li>
<li>Grids</li>
<li>Frameworks
<ul>
<li>Bootstrap</li>
<li>Foundation</li>
<li>Sass</li>
<li>Less
<ul>
<li>Bootstrap</li>
<li>Foundation</li>
<li>Sass</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>JavaScript
<ul>
<li>Ajax</li>
<li>jQuery</li>
</ul>
</li>
</ul>
</li>
<li>WordPress Development
<ul>
<li>Custom Post Types
<ul>
<li>subPortfolios</li>
<li>subTestimonials</li>
<li>subPortfolios</li>
<li>subTestimonials</li>
</ul>
</li>
<li>Themes</li>
<li>Plugins</li>
<li>Themes</li>
<li>Plugins</li>
<li>Themes</li>
<li>Plugins</li>
<li>Options</li>
<li>Options</li> <li>Themes</li>
<li>Plugins</li>
<li>Options</li>
<li>Options</li>
</ul>
</li>
<li>About Us</li>
</ul>
By placing scroller, the second and third level dropdown menu isnot showing. How can I placescroller without not interrupting the normal functionality of the pure multidowndown css? Any suggestions, tutorials and solutions are highly welcomed as long it leads to solution.

Please change your css
ul ul ul {
left: 100%;
top: 0;
}
to
ul ul ul {
z-index: 9999;
}
I hope it will help you..

Drop down doesn't show up unless i change Nav height

So I finally got my dropdown to work however unless i change the nav height here it won't show up:
header nav {
width:100%;
height:auto;
background:url(../images/menu-bg.jpg) 0 0 no-repeat;
overflow:hidden;
position:relative;
z-index:1;
}
I've been playing with the Z value, but I'm not 100% sure how it works or if i missed something. If i change the nav height to like 150px it works fine, but then there is a huge gap when the dropdown isn't there.
HTML CODE:
<header>
<div class="main">
<div class="wrapper">
<h1>KB Customs</h1>
<div class="fright">
<div class="indent"> <span class="address">Walker, MI 49544</span> <span class="phone">Tel: 616-901-1174</span> </div>
</div>
</div>
<nav>
<ul class="menu">
<li>Home</li>
<li><a class="active" href="about.html">About Us</a></li>
<li>Products
<ul class="dropdown">
<li>
Products
</li>
</ul>
</li>
<li>Gallery</li>
<li>FAQ & Prices</li>
<li>Contact Us</li>
</ul>
</nav>
</div>
</header>
CSS CODE:
/***** menu *****/
header nav {
width:100%;
height:auto;
background:url(../images/menu-bg.jpg) 0 0 no-repeat;
overflow:hidden;
position:relative;
z-index:1;
}
#page1 header nav {
margin-bottom:28px;
}
.menu li {
float:left;
position:relative;
background:url(../images/menu-spacer.gif) left top no-repeat;
z-index: 2;
}
.menu > li:first-child {
background:none;
}
.menu li a {
display:inline-block;
font-size:18px;
line-height:25px;
padding:12px 28px 12px 29px;
color:#808080;
text-transform:capitalize;
}
.menu > li:first-child > a {
text-indent:-999em;
background:url(../images/menu-home.png) center -25px no-repeat;
min-width:22px;
}
.menu li a.active, .menu > li > a:hover {
color:#fff;
}
.menu > li:first-child > a.active, .menu > li:first-child > a:hover {
background-position:center 15px;
}
ul li ul.dropdown{
min-width:inherit; /* Set width of the dropdown */
background:url(../images/menu-bg.jpg) 0 0 no-repeat;
display: none;
position: absolute;
z-index: 3;
left: 0;
}
ul li:hover ul.dropdown{
display: block; /* Display the dropdown */
color:#fff;
z-index: 3;
}
ul li ul.dropdown li{
display: block;
z-index: 3;
}
ul li ul.dropdown:hover li a{
color:#fff;
z-index: 3;
}

css + html menu hitbox

I wrote some code using different internet sources. I ran into a problem -
every object that's in the bottom part of the menu cannot be interacted with.
The menu interferes with everything below where the dropdown falls.
<style>
body {
padding: 0;
margin: 0;
font-family: Arial;
font-size: 23px;
}
#nav {
background-color:1a1a1a;
opacity: 0.9;
}
#nav_wrapper {
width: 960px;
margin: 0 auto;
text-align: right;
}
#nav ul {
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
min-width: 200px;
}
#nav ul li {
display: inline-block;
}
#nav ul li:hover {
background-color: #333;
}
#nav ul li a, visited {
color: #CCC;
display: block;
padding: 15px;
text-decoration: none;
}
#nav ul li:hover ul {
display: block;
}
#nav ul ul {
display: none;
position: absolute;
background-color: #333;
border: 0px solid #222;
border-top: 0;
margin-left: -5px;
}
#nav ul ul li {
display: block;
}
#nav ul ul li a:hover {
color: #699;
}
.left-to-right {
text-align: left;
}
</style>
<html lang="he">
<body dir-"rtl"><div id="nav">
<div id="nav_wrapper">
<div>
<ul <ul dir="RTL">
<li> תרמילים
<ul class="left-to-right">
<!-- <li class="backpacks" id="firstlight-20l"> FirstLight 20L </li>
<li class="backpacks" id="firstlight-30l"> FirstLight 30L </li>
<li class="backpacks" id="firstlight-40l"> FirstLight 40L </li>-->
<li class="backpacks"> rotation180° Professional 38L Deluxe </li>
<li class="backpacks"> rotation180° Horizon 34L </li>
<li class="backpacks"> rotation180° Panorama 22L </li>
<!-- <li class="backpacks" id="rotation180-travel-away"> rotation180° Travel Away 22L </li>-->
<li class="backpacks" id="rotation180-trail"> rotation180° Trail 16L </li>
</ul>
</li>
<li> תיקי מצלמות ספורט
<ul class="left-to-right">
<li>GP 1 kit case
</li>
<li>GP 2 kit case
</li>
</ul>
</li>
<li> אביזרים
<ul class="left-to-right">
<li>r180º Panorama/Horizon Photo Insert
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>

#nav_wrapper ul ul li{ text-align:left;}
you need to add this only: demo

You might be able to use vertical-align for the list elements & text-align for the links.

Just add a class to the <ul> tag of each dropdown and add text-align: left to it.
FIDDLE Here

jQuery - Change vertical menu to horizontal

I'm trying to use the Tendina jQuery Plugin. It works great, but I'd like the menus to be laid out horizontally, like this:
I've been messing around with the CSS ( inline-block and other stuff ) but haven't been able to make it work.
I'm not gonna post the JS because it's a whole lot of code... I think too much to paste here, but feel free to check the JSFiddle.
Any help would be highly appreciated.
Thanks.
HTML
<ul class="dropdown">
<li>
Menu 1
<ul>
<li>Submenu 1</li>
</ul>
</li>
<li>
Menu 2
<ul>
<li>Submenu 2</li>
<li>Submenu 2</li>
<li>Submenu w/ children
<ul>
<li>Subsubmenu 2</li>
<li>Subsubmenu 2</li>
</ul>
</li>
</ul>
</li>
<li>
Menu 3
<ul>
<li>Submenu 3</li>
<li>Submenu 3</li>
</ul>
</li>
</ul>
CSS
.dropdown {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
background-color: #f7f7f7;
font-family: Arial, Helvetica, sans-serif;
padding-top: 20px;
font-size: 12px;
}
.dropdown li {
padding: 0 10px;
}
.dropdown li.selected {
background-color: #f2f2f2;
}
.dropdown li a {
display: block;
width: 100%;
padding: 10px;
text-decoration: none;
text-transform: uppercase;
color: black;
}
.dropdown li > ul li {
padding: 0 20px;
}
.dropdown li > ul li a {
color: gray;
}
.dropdown li > ul li > ul li {
padding: 10px 30px;
}

Here's an updated version of your fiddle
.dropdown
{
position:absolute;
left:0;
top:0;
height:100%;
width:100%;
background-color:#f7f7f7;
font-family:Arial,Helvetica,sans-serif;
padding-top:20px;
font-size:12px
}
.dropdown li
{
padding:0 10px;
display:inline-block;
width:auto
}
.dropdown li.selected
{
background-color:#f2f2f2
}
.dropdown li a
{
display:block;
width:100%;
padding:10px;
text-decoration:none;
text-transform:uppercase;
color:#000
}
.dropdown ul
{
position:absolute
}
.dropdown li > ul li
{
padding:10px 0;
}
.dropdown li > ul li a
{
color:gray
}
.dropdown li > ul li > ul li
{
padding:10px 30px
}
}

How to center text in my div

I need to center the text in the div, but I have no idea how to. If someone could please help me, that would be absolutely wonderful.
CSS
#nav {
width: 425px;
height: 50px;
margin: 0 auto;
color: white;
font-size: 25px;
font-family: Mager;
}
#nav li {
list-style: none;
float: left;
}
#nav li:hover {
opacity: .6;
}
HTML
<div id="nav">
<ul>
<li>Home</li>
<li> </li>
<li>Soundcloud</li>
<li> </li>
<li>Facebook</li>
<li> </li>
<li>Contact</li>
</ul>

I have make a little fiddle you can see...
http://jsfiddle.net/Azzamean/fjnuw/67/
HTML:
<div id="menu">
<header>
<ul>
<li>Home
</li>
<li>Sound Cloud
</li>
<li>Facebook
</li>
<li>Contact
</li>
</ul>
</header>
</div>
And the CSS:
ul {
list-style-type: none;
padding: 0;
overflow:hidden;
}
a:link, a:visited {
margin:0 auto;
display:block;
width: 120px;
font-weight:bold;
color:#FFFFFF;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover, a:active {
background-color:#FFFFFF;
color:#E80000;
}
li {
display:inline-block;
}
#menu {
background-color:#E80000;
text-align:center;
}

Use the text-align property:
#nav li {
list-style: none;
float: left;
text-align:center;
}
But note that you are using float:left, so unless you set a width, you won't actually see any centering.
Here's a jsFiddle demo

Categories

Resources