Navbar issue

Nic727 · September 8, 2015

Hi,

I'm creating a navigation bar for a small project for school and I need help to fixe an issue.

My sub-menu is appearing weirdly on my page.

<!doctype html><html><head><meta charset="utf-8"><title>Navigation</title><link rel="stylesheet" type="text/css" href="styles/styles.css"></head><body><nav>    <ul>        <li>Accueil</li>        <li class="activate1">Histoire            <ul class="sub1">                <li>Monuments</li>                <li>Quartiers</li>            </ul>        </li>         <li>Musée</li>        <li class="activate2">Nature            <ul class="sub2">                <li>Parcs</li>            </ul>        </li>        <li>Arts</li>        <li>À propos</li>        <li>Contact</li>    </ul></nav></body></html>

/* CSS *//* NAVIGATION */nav{	position: absolute;    display:block;    width: 90%;	background-color: rgba(255, 96, 0, 0.5);	z-index: 1;    list-style-type: none;}nav ul {	margin: 0;	padding: 0;}nav ul li{	display:inline-block;}.sub1{	position: relative;	top: 25px;    width: 100px;    height: 50px;	left: 10px;	background-color: rgba(24, 65, 33, 0.5);	z-index: 2;	display: none;}.sub2{	position: relative;	top: 10px;	left: 10px;	background-color: rgba(24, 65, 33, 0.5);	z-index: 2;	display: none;}/* Affichage sous-menu */.activate1:hover .sub1{	display:block; }.activate2:hover .sub2{	display:block; }

I tried a lot of thing, but I don't know what's the problem. My teacher doesn't understand too. Some people on internet are using very long code for a nav bar, but for this project I use something I learned in class to make it easy, but for now I have a problem.

Thank you for your help.

COBOLdinosaur · September 8, 2015

The first problem is that you are using display:block for the hover and it should be display:inline.

The second problwm is the the width if the sub is getting added to the parent. It has no width until it is hovered. it probably needs to be position:absolute.

I have a number of dropdown menu options that are CSS only on my site. You might see the way to do what you are trying to do with one of the examples. I'm not quite sure what your intention is without some description of what you think you are trying to acheive.

Nic727 · September 8, 2015

Hi,

With inline, it show the sub-option on one line, but I would like to see them one under the other.

position absolute doesn't work very well for me, because everything appear at the beginning of the page instead of under the menu like when it's relative.

That's what I would like :

davej · September 8, 2015

About the only time you want to use position-absolute is inside an outer block element that is position-relative. This relationship creates a special situation.

Nic727 · September 9, 2015

But this method work, but not on one line.

<!DOCTYPE html><html><head><meta charset="utf-8" /><title>Devoir 2 / CSS-P et les menus déroulants</title><link rel="stylesheet" type="text/css" href="styles.css"><script type="text/javascript"></script></head><body><div id="menu">  <ul class="niveau1">    <li><a href="menu 1">menu 1</a></li>    <li class="sousmenu"><a href="menu 2">menu 2</a>	<ul class="niveau2">		<li><a href="Sous menu 2.1">Sous menu 2.1</a></li>		<li><a href="Sous menu 2.2">Sous menu 2.2</a></li>	</ul>	</li>    <li><a href="menu 3">menu 3</a></li>    <li class="sousmenu"><a href="menu 4">menu 4</a>	<ul class="niveau2">		<li class="sousmenu"><a href="Sous menu 4.1">Sous menu 4.1</a>		<ul class="niveau3">			<li><a href="Sous sous menu 4.1.1">Sous sous menu 4.1.1</a></li>			<li><a href="Sous sous menu 4.1.2">Sous sous menu 4.1.2</a></li>			<li><a href="Sous sous menu 4.1.3">Sous sous menu 4.1.3</a></li>		</ul>		</li>		<li><a href="Sous menu 4.2">Sous menu 4.2</a></li>	</ul>	</li>    <li><a href="menu 5">menu 5</a></li>  </ul></div></body></html>

/* CSS Navigation *//* GENERAL */p{	font-size:0.9em; 	font-family:Verdana, Arial, Helvetica, sans-serif; }#menuFormatTexte li, h3{	font-size:13px; 	font-family:Arial, Helvetica, sans-serif; }/* Navigation, POSITION */div#menu {	width:100px;}div#menu ul {	padding:0px; 	width:100px; 	border:1px solid #000000; 	margin: 0px; 	background:white; }div#menu ul li {	position: relative; 	list-style: none; 	border-bottom:1px solid #666666;}div#menu ul ul {	position: absolute; 	top:0px; 	left:100px;}/* Hover links */div#menu li a {	text-decoration: none; 	color: #0000000; 	width:84px;	padding: 4px 0 4px 8px; 	border-left: 8px solid #BBBBBB;	display: block;}/* HOVER menu */div#menu li:hover {background-color: #E6E9FF;}div#menu li a:hover {border-left-color: #3040CF;}/* Active sub-menu */div#menu li.sousmenu:hover{	background: #EBB;}/* Hover apparition */div#menu ul ul { display :none}div#menu ul.niveau1 li.sousmenu:hover ul.niveau2, div#menu ul.niveau2 li.sousmenu:hover ul.niveau3 {display:block;}

dsonesuk · September 9, 2015

For submenus (ul) to show at correct position under their parent (li) the parent should use position: relative;

ul li {position: relative; }

and submenu ul use position: absolute;

li ul {position: absolute; top: 25px; left: 0;} li li ul {top: 0;}/* position submenu level 2 to top inline with parent li */

This will position submenus always relative to parent left edge.Unless you are using the outermost wrapping parent ul as some sort of pop-up, you would never use position: absolute; on it, and as for not working online, are you you have set relative path to css file correcty? cause it should work.

COBOLdinosaur · September 9, 2015

Anytime that you use display block you are adding line feeds to the structure and the changes both the interior and perimeter dimensions. try using display:inline-block instead. other possibilities are display inline-table or display:table-cell, but they will probably add height which is almost as bad as the line feeds.

Nic727 · September 9, 2015

ok

I made some change and it work now, but I have another problem with width of my sub-menu.

Check my code :

Also, how can I put my menu name centered on the page to take all the width?

<!doctype html><html><head><meta charset="utf-8"><title>Navigation</title><link rel="stylesheet" type="text/css" href="styles/styles.css"></head><body><nav>    <ul class="lvl1">        <li>Accueil</li>        <li class="sub">Histoire            <ul class="lvl2">                <li>Monuments</li>                <li>Quartiers</li>            </ul>        </li>         <li>Musée</li>        <li class="sub">Nature            <ul class="lvl2">                <li>Parcs</li>            </ul>        </li>        <li>Arts</li>        <li>À propos</li>        <li>Contact</li>    </ul></nav></body></html>

/* CSS *//* NAVIGATION */nav{    width: 100%;	background-color: rgba(255, 96, 0, 0.5);	z-index: 1;    list-style: none;	text-decoration: none;}nav ul {	margin: 0;	padding: 0;	background: orange;}nav ul li{	display:inline-block;	position: relative;    padding:16px;}nav ul ul{	position: absolute;	top: 40px;	left: 10px;	background-color: green;}/*Hover*/nav li:hover {	background-color: red;}nav .sub li:hover{	background-color:pink;}/* Sub-menu apparition */nav ul ul { display :none}nav ul.lvl1 li.sub:hover ul.lvl2{	display:block;}

Edited September 9, 2015 by Nic727

dsonesuk · September 10, 2015

You don't require classes for each parent menu or submenu, and if this is a menu it would help if you allow for anchor links these should be where padding is added.

<!DOCTYPE html><html>    <head>        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">        <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0,user-scalable=no" />        <title>Navigation</title>        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>        <script  type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>        <script type="text/javascript">        </script>        <style type="text/css">            /* NAVIGATION */            nav{                /*width: 100%; removed by dsonesuk */                background-color: rgba(255, 96, 0, 0.5);                /*z-index: 1; removed by dsonesuk */                /* list-style: none; removed by dsonesuk  used for ul only*/                text-decoration: none;                font-size: 0; /* removes line-break spaces between li , caused when using inline-block*/            }            nav ul {                margin: 0;                padding: 0;                background: orange;                list-style: none; /* added by dsonesuk */                text-indent: 0; /* added by dsonesuk used on some browsers */            }            nav ul li{                position: relative;                /*  padding:16px; removed by dsonesuk*/                font-size: 16px;            }            nav ul ul{                position: absolute;                top: 40px;                left: 10px;                background-color: green;            }            /* added by dsonesuk*/            nav ul > li {                display:inline-block;            }            /* added by dsonesuk*/            nav ul ul > li {                display: block;            }            /* added by dsonesuk*/            nav a {                color: #000;                display: block;                text-decoration: none;                padding: 16px; /* added by dsonesuk from li*/            }            /*Hover*/            nav li:hover { /*parent level */                background-color: red;            }            nav li li:hover{ /*submenu level 1+ */                background-color:pink;            }            nav li li li:hover{ /*submenu level 2+ Added extra li to target next level for styling*/                            }            /* Sub-menu apparition */            nav ul ul { display :none}            nav ul li:hover ul{                display:block;            }        </style>    </head>    <body>        <nav>            <ul>                <li><a href="#">Accueil</a></li>                <li><a href="#">Histoire</a>                    <ul>                        <li><a href="#">Monuments</a></li>                        <li><a href="#">Quartiers</a></li>                    </ul>                </li>                <li><a href="#">Musée</a></li>                <li><a href="#">Nature</a>                    <ul>                        <li><a href="#">Parcs</a></li>                    </ul>                </li>                <li><a href="#">Arts</a></li>                <li><a href="#">À propos</a></li>                <li><a href="#">Contact</a></li>            </ul>        </nav>    </body></html>

Nic727 · September 10, 2015

I tried your CSS, but it didn't work like expected. Maybe I did something wrong.

But I change my CSS a bit. Now I have something 1/2 responsive. I put everything centered with a width of 100px, but It's impossible to put a width in % for the boxes to take all the nav bar and change width automatically when I resize the browser.

Also, I have some weird thing I would like to remove. I have a kind of margin or padding on top, left and right side of my nav bar (orange) and it make that ugly. I put 100% and top 0px... Don't understand.

Between my "li", I have a kind of 2px of nothing.

My new CSS.

nav{    width: 100%;	background-color: rgba(255, 96, 0, 0.5);	z-index: 1;    list-style: none;	text-decoration: none;	text-align: center;}nav ul {	margin: 0 auto;	padding: 0;	background: orange;}nav ul li{	display:inline-block;	position: relative;    padding:16px;	width: 100px;}nav ul ul{	position: absolute;	top: 40px;	left: 10px;	width: 100%;	background-color: green;}

Thank you.

It's the first time I'm doing a full navigation by myself, so I'm very sorry if I look annoying. After I will just need to change some stuffs to make it responsive and make a kind of mobile menu.

Edited September 10, 2015 by Nic727

dsonesuk · September 10, 2015

The body element has default margin, padding zero that, remove width: 100%; from nav its not required. Because you are using display: inline-block; and you menu elements are stacked using line breaks for readability purposes, each line break is treated as a space the size of current font size used, THAT IS WHY i used font-size: 0; on nav so that removes spacing, but that hides text used within the menu, so i reset the font size for li and the text reappears within anchor text but without annoying space between each li as commented on in my design but you decided to ignore that thinking i just put it there for no purpose, hello! This is the reason it is there.To equally set the width equally of parent li use my design to target parent li only, divide 100 by number of parent li there are and use that value as percentage.

Nic727 · September 10, 2015

Hi,

I will try that this afternoon.

But yesterday I tried with width: calc(100%/7), because I have 7 elements, but there is always one element at the bottom. Maybe it's because I put padding: 16px to ul - li.

Also, I tried something else with %, but it make my sub small and on one line and one under one, so that's weird.

What I'm trying to get.

dsonesuk · September 10, 2015

As pointed out with my menu layout when said padding should be applied to anchor links.

dsonesuk · September 10, 2015

<!DOCTYPE html><html>    <head>        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">        <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0,user-scalable=no" />        <title>Navigation</title>        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>        <script  type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>        <script type="text/javascript">        </script>        <style type="text/css">            body, html {margin:0; padding: 0;}/*   */            /* NAVIGATION */            nav{                /*width: 100%; removed by dsonesuk */                border: 3px solid green;                background-color: rgba(255, 96, 0, 0.5);                text-decoration: none;                font-size: 0; /* removes line-break spaces between li */                text-align:center;            }            nav ul li{                position: relative;                /*  padding:16px; removed by dsonesuk*/                font-size: 16px;            }            nav > ul {display:inline-block; width: 100%;            }            nav ul {                margin: 0;                padding: 0;                background: orange;                list-style: none; /* added by dsonesuk */                text-indent: 0; /* added by dsonesuk */            }            nav ul ul{                position: absolute;                top: 40px;                left: 10px;                background-color: green;                width: 100%;            }            /* added by dsonesuk*/            nav ul > li {                display:inline-block;                width: 14.28571428571429%;                z-index: 5;            }            /* added by dsonesuk*/            nav ul ul > li {                display: block;                width: auto;                text-align: left;            }            /* added by dsonesuk*/            nav a {                display: block;                text-decoration: none;                padding: 16px; /* added by dsonesuk from li*/                color: #000;            }            /*Hover*/            nav li:hover { /*parent level */                background-color: red;            }            nav li li:hover{ /*submenu level 1+ */                background-color:pink;            }            /* Sub-menu apparition */            nav ul ul { display :none}            nav ul li:hover ul{                display:block;            }        </style>    </head>    <body>        <nav>            <ul>                <li><a href="#">Accueil</a></li>                <li><a href="#">Histoire</a>                    <ul>                        <li><a href="#">Monuments</a></li>                        <li><a href="#">Quartiers</a></li>                    </ul>                </li>                <li><a href="#">Musée</a></li>                <li><a href="#">Nature</a>                    <ul>                        <li><a href="#">Parcs</a></li>                    </ul>                </li>                <li><a href="#">Arts</a></li>                <li><a href="#">À propos</a></li>                <li><a href="#">Contact</a></li>            </ul>        </nav>    </body></html>

Nic727 · September 10, 2015

Thank you it work very well. I have a couple of questions about your CSS.

I read some stuffs about "flex" to make navbar flexible. Do you think it could be better?

Also, you put a width of 14.28571428571429%, but I read that you can put calc(100%/7) if you have 7 elements, but it's not working.

I have just one little problem with I resize. I know that I will need to change the padding at a certain size, but why it doesn't resize sub-menu automatically with the size of the words?

dsonesuk · September 10, 2015

remove width: 100%; from nav ul ul {...} and might want to consider adding white-space: nowrap to anchor links.

calc() is not fully supported, use flex?, don't know, up to you, to try out ans see if it works as you expected.

The white-space will eventually cause text to bleed outside of li as device or browser window get smaller, but you would normally use media queries to adjust menu layout, font-size for smaller devices, so you might want to consider bootstrap css.

            nav ul ul{                position: absolute;                top: 40px;                left: 10px;                background-color: green;                /*width: 100%;*/            }            nav a {                display: block;                text-decoration: none;                padding: 16px; /* added by dsonesuk from li*/                color: #000;                white-space: nowrap;            }

Nic727 · September 10, 2015

Thank you.

I put padding:16px 10px and it work for smaller browser window.

Now I have to do a mobile menu :sorry:

I will try myself and will show you my result after.

Nic727 · September 15, 2015

Hi,

I did a kind of mobile menu with a tutorial I found on the web, but it doesn't show my sub-menu.

I added that in HTML5 :

<input type="checkbox" id="toggle" /><nav> <!-- The beginning of the nav --> <label for="toggle" class="toggle" data-open="Main Menu" data-close="Close Menu" onclick></label>

That's the CSS of the mobile navigation.

@media screen and (max-width: 600px){ul.lvl1 { 	display: none; 	opacity: 0; 	width: 100%; 	position: absolute; 	right: 0; } ul.lvl1 > li { 	display: block; 	width: 100%; 	margin: 0; } ul.lvl1 > li > a {	display: block; 	width: 100%;	background-color:#3A5FFF;	text-decoration: none; 	-webkit-box-sizing: border-box; 	-moz-box-sizing: border-box; 	box-sizing: border-box; } .toggle { 	display: block; 	position: relative; 	cursor: pointer; 	-webkit-touch-callout: none; 	-webkit-user-select: none; 	user-select: none; } #toggle:checked + nav ul.lvl1 { 	display: block; 	opacity: 1;} ul.lvl1{  		background: #FFFFFF;  		border-top: 1px solid #51C1F1;  	}  	  	ul.lvl1, ul.lvl1 > li, ul.lvl1> li > a{  		height: auto;  	}  	  	ul.lvl1 > li > a{  		padding: 15px 15px;  	}  	  	ul.lvl1 > li > a:hover, ul.lvl1 > li > a:focus{  		background: #3ABEFF;  		/*box-shadow: inset 5px 0px #51C1F1; */ 		/*padding: 15px 15px 15px 25px; */ 	} 	nav .sub li:hover{	background-color:#69DAFF;} 	  	.toggle:after {  		content: attr(data-open);  		display: block;  		width: 200px;  		margin: 0;  		padding: 10px 50px;  		background: #51C1F1;  		-webkit-border-radius: 2px;  		border-radius: 2px;  		text-align: center;  		font-size: 12px;  		color: #FFFFFF;  		-webkit-transition: all 0.5s linear;  		-moz-transition: all 0.5s linear;  		-o-transition: all 0.5s linear;  		transition: all 0.5s linear;  		-webkit-box-sizing: border-box;  		-moz-box-sizing: border-box;  		box-sizing: border-box;   	}  	  	.toggle:hover:after{  		background: #000; 	}  	  	#toggle:checked + div .toggle:after{  		content: attr(data-close); 	} }

Edited September 15, 2015 by Nic727

Navbar issue

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in