I am currently creating a responsive navigation menu with HTML5 and CSS. To do this, my idea is that in the desktop version the menu is shown in its entirety, at full width, and that in the mobile version a label is shown with a checkbox which opens or closes the menu in responsive .
The problem is that the menu doesn't occupy the full width of the page (on any screen. I currently have two, one 1440px and one 1920px for testing).
I leave the code below:
Note: Image is a 350 x 100 pixel placehold
body {
margin: 0px;
}
/*Strip the ul of padding and list styling*/
ul {
list-style-type: none;
margin: 0;
padding: 0;
position: absolute;
}
/*Hacer que la imagen no se mueva */
#img-nav {
padding-top: 0px !important;
}
/*Create a horizontal list*/
li {
display: inline-block;
float: left;
}
/*Style for menu links*/
li a {
display: block;
min-width: 200px;
height: 70px;
text-align: center;
line-height: 50px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #fff;
background: #2f3036;
text-decoration: none;
padding-top: 30px;
}
/*Hover state for top level links*/
li:hover a {
background: #19c589;
}
/*Style for dropdown links*/
li:hover ul a {
background: #f3f3f3;
color: #2f3036;
height: 40px;
line-height: 40px;
}
/*Hover state for dropdown links*/
li:hover ul a:hover {
background: #19c589;
color: #fff;
}
/*Hide dropdown links until they are needed*/
li ul {
display: none;
}
/*Make dropdown links vertical*/
li ul li {
display: block;
float: none;
}
/*Prevent text wrapping*/
li ul li a {
width: auto;
min-width: 100px;
padding: 0 20px;
}
/*Display the dropdown on hover*/
ul li a:hover + .hidden,
.hidden:hover {
display: block;
}
/*Style 'show menu' label button and hide it by default*/
.show-menu {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-decoration: none;
color: #fff;
background: #19c589;
text-align: center;
padding: 10px 0;
display: none;
}
/*Hide checkbox*/
input[type=checkbox] {
display: none;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu {
display: block;
}
/*Responsive Styles*/
@media screen and (max-width: 760px) {
/*Make dropdown links appear inline*/
ul {
position: static;
display: none;
}
/*Create vertical spacing*/
li {
margin-bottom: 1px;
}
/*Make all menu links full width*/
ul li,
li a {
width: 100%;
}
/*Display 'show menu' link*/
.show-menu {
display: block;
}
#img-nav {
display: none;
}
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Only Navigation Menu</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/home.css">
</head>
<body>
<nav>
<label for="show-menu" class="show-menu">Show Menu</label>
<input type="checkbox" id="show-menu" role="button">
<ul id="menu">
<li>
<a href="#" id="img-nav">
<img src="images/nav/logoplacehold.png" alt="">
</a>
</li>
<li><a href="#">Inicio</a>
</li>
<li>
<a href="#">Aula Virtual</a>
<ul class="hidden">
<li><a href="#">Test Online</a>
</li>
<li><a href="#">Test DGT</a>
</li>
</ul>
</li>
<li><a href="#">Resultado Teórico</a>
</li>
<li><a href="#">Nuestros Vehículos</a>
</li>
<li><a href="#">Permisos</a>
</li>
</ul>
</nav>
</body>
</html>
Right now the list doesn't fill 100%, so the first thing would be to make it fill the width of the window:
With that the list will already occupy the entire width, now what you want is that each element of the list is distributed in a similar way. To do this you can do as Jose FG suggests in his answer and do a
calc
:The code would look like this:
Now, if you want to do something similar but the number of menus can change, then that solution can be a pain (because you would have to update the CSS if menu options are added/removed).
Another option you have would be to use
flex
. This way the menus will automatically adjust to the width of the parent regardless of its number, so the code will serve you regardless of the number of options you have:You would have to make some adjustments for the submenu, I have made some but they are not wonderful either. And the result would look like this:
You fix it by adding a relative width to each list item.
You can do something like:
This will always adapt to the width of the screen.