Hellow.
I am creating a responsive menu with HTML5 and CSS. To do that, I create the navigation menu for desktop computers and then I use a checkbox with a lavel to show the responsive menu (I mean, show menu).
This is the code:
Code Note:(The image is 350px width x 100px heigth):
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>Inicio
</li>
<li>
Aula Virtual
<ul class="hidden">
<li>Test Online
</li>
<li>Test DGT
</li>
</ul>
</li>
<li>Resultado Teórico
</li>
<li>Nuestros Vehículos
</li>
<li>Permisos
</li>
</ul>
</nav>
</body>
</html>
The problem:
I want to have a full width menu (in PC) but I don't know how to do it.
Thank you all!
Woops! I messed up. Surround the ul in a div in the HTML. Set the div's z-index to something higher than 0, position to fixed, and width to 100%.
Remove the background from your a tag and put it on ul tag then add css on it width:100%. This one works fine on me.
body {
margin: 0px;
}
/*Strip the ul of padding and list styling*/
ul {
list-style-type: none;
margin: 0;
padding: 0;
position: absolute;
width:100%;
background: #2f3036;
}
/*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;
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;
background: #2f3036;
}
/*Create vertical spacing*/
li {
margin-bottom: 1px;
}
/*Make all menu links full width*/
ul li,
li a {
width: 100%;
background: #2f3036;
}
/*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>Inicio
</li>
<li>
Aula Virtual
<ul class="hidden">
<li>Test Online
</li>
<li>Test DGT
</li>
</ul>
</li>
<li>Resultado Teórico
</li>
<li>Nuestros Vehículos
</li>
<li>Permisos
</li>
</ul>
</nav>
</body>
</html>
Related
I want a Dropdown navbar. But the style sheet not work for the drop down element. The elements should be vertical and not horizontal for the sub menue.
Here you can see the code. It is from w3schools. The only change is that add a class name to ensure that this rules are only fot this navbar.
But the submenue ignore now my style sheet like block and color.
Any idea?
https://www.w3schools.com/code/tryit.asp?filename=G42IHSMIFQAA
Just deleted the display: inline-block; over the ul.topnav li a, .dropbtn, as you'd force the elements to be side-by-side, and rather, use display: block; so they can obey the float: left; parameter that you want.
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
ul.topnav li {
float: left;
}
ul.topnav li a, .dropbtn {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
ul.topnav li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
ul.topnav li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1;}
.dropdown:hover .dropdown-content {
display: block;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<ul class="topnav">
<li>Home</li>
<li>News</li>
<li class="dropdown">
Dropdown
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</li>
</ul>
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>
</body>
</html>
I'm working on this responsive menu using the code from here:
http://www.sanwebcorner.com/2017/03/multi-level-responsive-dropdown-menu.html
I am attempting to modify the code so that it satisfies all the following conditions:
It does not display a background color on any of the top buttons.
It always has black text in the sub menus.
All sub menus behave exactly the same in the responsive design.
But, I am running into several problems. One of which: two items in the main menu appear twice in the responsive submenu and I don't know why.
I have tried multiple solutions including:
Using additional CSS class selectors.
Every variation of colors in the existing CSS that I can think of.
Every variation of additional CSS class selectors I can think of.
I am very much looking forward to seeing this project fully completed and off my plate. If you could please take a look and identify where I'm going wrong on this code, I would be forever grateful. Thank you so very much.
body {
background-color: #908888;
}
.toggle, [id^=drop] {
display: none;
}
menu {
margin: 0;
padding: 0;
background-color: #5E4C4C;
}
menu:after {
content: "";
display: table;
clear: both;
}
menu ul {
float: left;
padding: 0;
margin: 0;
list-style: none;
position: relative;
}
menu ul li {
margin: 0px;
display: inline-block;
float: left;
}
menu a {
display: block;
padding: 14px 20px;
color: #fff;
font-size: 17px;
text-decoration: none;
}
menu a.new {
display: block;
padding: 14px 20px;
color: #000;
font-size: 17px;
text-decoration: none;
background-color: #ffffff;
}
menu a.new2 {
display: block;
padding: 14px 20px;
color: #ffffff;
font-size: 17px;
text-decoration: none;
background-color: #5E4C4C;
}
menu ul li ul li:hover {
background-color: #f6f4fd;
color: #000000;
}
menu a:hover {
background-color: none;
color: #fff;
}
menu a.new:hover {
background-color: #f6f4fd;
color: #000000;
}
menu a.new2:hover {
background-color: #5E4C4C;
color: #ffffff;
}
menu ul ul {
display: none;
position: absolute;
top: 48px;
}
menu ul li:hover > ul {
color: #000000;
display: inherit;
}
menu ul ul li {
width: 170px;
float: none;
display: list-item;
position: relative;
border-bottom: 0px;
background-color: #ffffff;
color: #000000;
}
menu ul ul ul li {
position: relative;
top: -60px;
left: 170px;
background-color: #ffffff;
color: #000000;
}
li > a:after {
content: ' ▼';
font-size: 11px;
}
li > a:only-child:after {
content: '';
}
#media all and (max-width : 768px) {
menu {
margin: 0;
}
.toggle + a, .menu {
display: none;
}
.toggle {
display: block;
background-color: #5E4C4C;
padding: 14px 20px;
color: #FFF;
font-size: 17px;
text-decoration: none;
border: none;
}
.toggle:hover {
background-color: #DC4E5B;
}
[id^=drop]:checked + ul {
display: block;
}
menu ul li {
display: block;
width: 100%;
}
menu ul ul .toggle, menu ul ul a {
padding: 0 40px;
}
menu ul ul ul a {
padding: 0 80px;
}
menu a:hover, menu ul ul ul a {
background-color: #f6f4fd;
}
menu a.new:hover {
background-color: #f6f4fd;
color: #000000;
}
menu a.new2:hover {
background-color: #5E4C4C;
color: #ffffff;
}
menu ul li ul li .toggle, menu ul ul a, menu ul ul ul a {
padding: 14px 20px;
color: #FFF;
font-size: 17px;
}
menu ul li ul li .toggle, menu ul ul a {
background-color: #BF3441;
}
menu ul ul {
float: none;
position: static;
color: #ffffff;
}
menu ul ul li:hover > ul, menu ul li:hover > ul {
display: none;
}
menu ul ul li {
display: block;
width: 100%;
}
menu ul ul ul li {
position: static;
}
}
#media all and (max-width : 330px) {
menu ul li {
display: block;
width: 94%;
}
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Multilevel Responsive Menu using css</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<menu>
<label for="drop" class="toggle" style="background-color: #BC7A1E;">Menu</label>
<input type="checkbox" id="drop" />
<ul class="menu">
<li><a class="new2" href="#">My Bid</a></li>
<li>
<label for="drop-1" class="toggle">Dashboard ▼</label>
<a class="new2" href="#">Dashboard</a>
<input type="checkbox" id="drop-1"/>
<ul>
<li><a class="new" href="#">Dashboard1</a></li>
<li><a class="new" href="#">Dashboard2</a></li>
<li><a class="new" href="#">Dashboard3</a></li>
</ul>
</li>
<li>
<label for="drop-2" class="toggle">Identity ▼</label>
<a class="new2" href="#">Identity</a>
<input type="checkbox" id="drop-2"/>
<ul>
<li><a class="new" href="#">Identity1</a></li>
<li><a class="new" href="#">Identity2</a></li>
<li>
<label for="drop-3" class="toggle">Identity3 ▼</label>
<a class="new" href="#">Identity3</a>
<input type="checkbox" id="drop-3"/>
<ul>
<li><a class="new" href="#">Identity3.1</a></li>
<li><a class="new" href="#">Identity3.2</a></li>
<li><a class="new" href="#">Identity3.3</a></li>
</ul>
</li>
</ul>
</li>
<li>Change Password</li>
<li>Invalid Bid Report</li>
<li>Rft Upload</li>
<li>Logout</li>
</ul>
</menu>
</body>
</html>
The twice menu problem is because you have media query it changing the display property of this <label for="drop-1" class="toggle">Dashboard ▼</label> tag .
Just remove menu a.new2 { display : block; }. Its on line 58, i think. Remove only the display: block declaration, not the entire rule.
That should solve that duplicate link issue.
I'm working on this project: http://www.livingthelighterlife.com/
The top navigation bar (Home, About, Contact, Work With Me) is giving me some difficulty. I have a hover submenu right now under the "About" section, but it is appearing under the header, for lack of a better explaination. I've messed with the z-index and that doesn't seem to be doing anything. Not quite sure what else to try.
Thanks in advance!
#top-navigation {
float: left;
}
#top-navigation ul {
list-style: none;
position: relative;
}
#top-navigation ul a {
display: block;
color: #ffffff;
text-decoration: none;
}
#top-navigation ul li {
position: relative;
float:left;
margin: 0px 10px;
}
#top-navigation ul li:hover {
background: #f6f6f6;
}
#top-navigation ul ul {
display: none;
position: absolute;
top: 100%;
left: 0;
background: #ffffff;
padding: 0;
}
#top-navigation ul ul li {
float:none;
width:200px
}
#top-navigation ul ul a {
line-height: 120%;
padding: 10px 15px;
}
#top-navigation ul ul ul {
top: 0;
left: 100%;
}
#top-navigation ul li:hover > ul {
display: block;
}
<div class="before-header"><section id="text-5" class="widget widget_text"><div class="widget-wrap"> <div class="textwidget"><nav id="top-navigation">
<ul>
<li>
Home
</li>
<li>
About
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
</ul>
</li>
<li>
Contact
</li>
<li>
Work With Me
</li>
</ul>
</nav></div>
</div></section>
</div>
In header section in this class .before-header you are using overflow hidden. That's why your submenu doesn't show. You can not use overflow hidden where you want to use submenu. Just remove overflow hidden.
check the header div with class .before-header, Do the following change:
.before-header {
z-index: 500;
background: #6d5d68;
clear: both;
/* overflow: hidden; */
padding: 7px 0;
text-align: center;
font-family: 'Arquitecta-Medium', 'Source Sans Pro', Helvetica, Arial, sans-serif;
font-size: 12px;
color: #ffffff;
letter-spacing: 1px;
text-transform: uppercase;
}
I've got an issue with two clashing color schemes in a nested ul menu. The words are all white and the top menu item links need to go orange on hover (which they do). But then the sub menu items need to stay white for the letters with an orange background (which they do) but change to an blue background on hover and have the links stay white. Unfortunately I can't seem to have one without messing up the other.
Here is the code. How can I get the sub menu links to stay white on hover?
<html>
<head>
<style>
a:link, a:visited {
color: #3e82ef;
}
a:hover, a:active {
color: #de9921;
}
#topBar {
position: absolute;
z-index: 10;
top: 0px;
width: 960px;
text-align: left;
color: #fff;
}
#topBar li {
display: inline-block;
font-size: 18px;
}
#topBar a, #topBar a:link, #topBar a:visited {
font-color: #1047A0;
color: #fff;
}
#topBar a:hover, #topBar a:active {
color: #de9921;
}
ul.dropdown {
list-style: none;
position: relative;
z-index: 10;
margin: 0px;
}
ul.dropdown li {
float: left;
zoom: 1;
background: #000;
margin: 0px;
}
ul.dropdown li a {
display: block;
padding: 10px 18px;
color: #fff;
}
ul.dropdown li:hover {
position: relative;
}
ul.sub_menu li:hover {
background: #2b94c8;
color: #fff;
}
/* here is my attempt to keep the links white, but it isn't working */
ul.sub_menu li a:hover {
color: #fff;
}
</style>
</head>
<body>
<div id="topBar">
<ul class="dropdown">
<li> About </li>
<li> Staff </li>
<li> Capabilities
<ul class="sub_menu">
<li>Materials</li>
<li>Automation</li>
<li>Processing</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
Your other CSS is taking precedence. Add the !important tag.
ul.sub_menu li a:hover {
color: #fff !important;
}
JSFiddle
I have a menu which is a <ul>. Inside one of the <li>s I have another <ul> to add a depth level, a sub-menu. However, when hovering the <li> to make the sub-menu appear, it's width changes to match the <ul>s. Also, the sub-menu will pull the content area down, and that's not what I want.
I want the <li> to maintain it's width when it's hovered, and the sub-menu to appear on top of the content area.
Here's the jsFiddle: http://jsfiddle.net/Cthulhu/RWjcA/ (If you hover Products, you will see it happen.)
Here's a slightly cleaned up version, and without the need for Javascript: http://jsfiddle.net/dZhQN/2/
HTML
<ul id="nav">
<li><a>Home</a></li>
<li><a>Whatever</a></li>
<li>
<a>Products</a>
<ul>
<li><a>What When How</a></li>
<li><a>Who Why</a></li>
</ul>
</li>
<li><a>Contacts</a></li>
</ul>
<div id="content"></div>
CSS
#nav, #nav ul {
list-style: none;
text-transform: uppercase;
text-align: center;
}
#nav li {
display: inline-block;
position: relative;
}
#nav li a {
display: block;
cursor: pointer;
font-size: 12px;
padding: 24px 20px 15px;
}
#nav > li > a:hover {
color: #FFF;
background: #4A6125;
}
#nav ul {
background: #000;
display: none;
position: absolute;
top: 100%;
left: 50%;
z-index: 999;
width: 150px;
margin-left: -75px;
}
#nav ul li a {
color: #FFF;
padding: 10px;
}
#nav ul li a:hover {
text-decoration: underline;
}
#nav li:hover ul {
display: block;
}
#content {
background: gold;
height: 200px;
}
You can simply give a fixed height to that Div
#main_menu .menu {
list-style: none outside none;
text-align: center;
text-transform: uppercase;
height:60px;
}
Hope this will help...