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.
Related
The submenu is not working correctly. It should appears when hover on specific item, but its appearing when hover any item
HTML
<div class="sty">
<ul class="met_clean_list">
<li>Link 01</li>
<ul>
<li><b>Sublink 01</b></li>
<li><b>Sublink 02</b></li>
</ul>
<li>Link 02</li>
<li>Link 03</li>
</ul>
</div>
CSS
.sty {
background:#aaa;
float:left;
width:600px;
}
.sty ul li {
list-style:none;
position:relative;
padding:25px 10px;
float:left;
}
.sty ul ul{
display:none;
}
.met_clean_list:hover ul {
display:block;
background:red;
}
https://jsfiddle.net/59opc6tj/119/
That's because the hover rule you specified doesn't do what you wish it will do.
You have written: If I hover on .met_clean_list, make all uls within it displayed.
What you wanted to write: If I hover on one of the lis, make the following ul visible.
Thus, you should write .met_clean_list li:hover + ul
.sty {
background: #aaa;
float: left;
width: 600px;
}
.sty ul li {
list-style: none;
position: relative;
padding: 25px 10px;
float: left;
}
.sty ul ul {
display: none;
}
.met_clean_list li:hover + ul {
display: block;
background: red;
}
.sty ul ul:hover {
display: block;
}
<div class="sty">
<ul class="met_clean_list">
<li>Link 01</li>
<ul>
<li><b>Sublink 01</b></li>
<li><b>Sublink 02</b></li>
</ul>
<li>Link 02</li>
<li>Link 03</li>
</ul>
</div>
Notice that I also added:
.sty ul ul:hover {
display: block;
}
So the dropdown won't disappear when you hover on it.
I hope this code will be useful for you
Html:
<ul>
<li>Home</li>
<li>Blog</li>
<li class="dropdown">
Dropdown
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</li>
</ul>
css:
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
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;
}
demo:
https://jsfiddle.net/faridvatani/54qypuds/
I have a menu that works really well but the submenu items overlap when there are too long. I tried setting the line-height to 24px which made the text ok but then the hover background color stuff was too small. Here's the code:
.nav ul {
list-style: none;
background-color: #5FD6D6; /*nav background */
text-align: center;
padding: 0;
margin: 0;
}
.nav li {
border-bottom: 1px solid #888;
}
.nav a {
text-decoration: none;
color: black; /* font color */
display: block;
transition: .3s background-color;
}
.nav a:hover {
background-color: #BFEFEF; /* hover color */
}
.nav a.active {
background-color: #ED1C24; /*selected color */
color: white;
cursor: default;
}
/* Sub Menus */
.nav li li {
font-size: 1em;
}
#media screen and (min-width: 650px) {
.nav li {
width: 150px;
border-bottom: none;
height: 100px;
line-height: 100px;
font-size: 2em;
display: inline-block;
margin-right: -4px;
}
.nav a {
border-bottom: none;
}
.nav > ul > li {
text-align: center;
}
.nav > ul > li > a {
padding-left: 0;
}
/* Sub Menus */
.nav li ul {
position: absolute;
display: none;
width: inherit;
}
.nav li:hover ul {
display: block;
}
.nav li ul li {
display: block;
}
}
<div class="nav">
<ul>
<li>Home
</li>
<li>Tutorials
<ul>
<li>Tutorial #1##
</li>
<li>Tutorial #2
</li>
<li>Tutorial #3
</li>
</ul>
</li>
<li><a class="active" href="#">About</a>
</li>
<li>Newsletter
<ul>
<li>News #1
</li>
<li>News #2###
</li>
<li>News #3
</li>
</ul>
</li>
</ul>
</div>
There are already some working answers, but if you'd like the child navigation items to increase in width as needed (as opposed to increase in height), I'd suggest removing an explicit width from .nav li (inside the media query), and adding it instead as a min-width to .nav > ul > li (also inside the media query).
(On a personal level, I find it much more readable if navigation items increase in width as needed and stick to a single line, instead of breaking to a new line and increasing in height.)
So those two declaration blocks would go from:
#media screen and (min-width: 650px) {
.nav li {
width: 150px;
border-bottom: none;
height: 100px;
line-height: 100px;
font-size: 2em;
display: inline-block;
margin-right: -4px;
}
.nav > ul > li {
text-align: center;
}
}
To:
#media screen and (min-width: 650px) {
.nav li {
border-bottom: none;
height: 100px;
line-height: 100px;
font-size: 2em;
display: inline-block;
}
.nav > ul > li {
text-align: center;
min-width: 150px; /* new */
margin-right: -4px; /* moved */
}
}
Note that I also moved the negative margin-right between the declaration blocks, as this seemed to be causing some issues with the child navigation items' backgrounds. Here's a JSFiddle to demonstrate the code in action.
Hope this helps! Let me know if you have any questions.
You can remove the "height", that worked for me:
.nav li {
width: 150px;
border-bottom: none;
/*height: 100px;*/
line-height: 100px;
font-size: 2em;
display: inline-block;
margin-right: -4px;
}
I don't like setting line-height that big except for special cases.
In your case, instead of having that big I believe it's more appropriate to use padding.
So to do that:
First remove line-height and height on .nav li, then it will now look like this.
.nav li {
width: 150px;
border-bottom: none;
font-size: 2em;
display: inline-block;
margin-right: -4px;
}
Then in your .nav a add a padding :
.nav a {
text-decoration: none;
color: black;
display: block;
transition: .3s background-color;
padding: 1em 0;
}
This way, your list are more flexible than having a fixed height.
Working example
.nav ul {
list-style: none;
background-color: #5FD6D6; /*nav background */
text-align: center;
padding: 0;
margin: 0;
}
.nav li {
border-bottom: 1px solid #888;
}
.nav a {
text-decoration: none;
color: black; /* font color */
display: block;
transition: .3s background-color;
padding: 1em 0;
}
.nav a:hover {
background-color: #BFEFEF; /* hover color */
}
.nav a.active {
background-color: #ED1C24; /*selected color */
color: white;
cursor: default;
}
/* Sub Menus */
.nav li li {
font-size: 1em;
}
#media screen and (min-width: 650px) {
.nav li {
width: 150px;
border-bottom: none;
font-size: 2em;
display: inline-block;
margin-right: -4px;
}
.nav a {
border-bottom: none;
}
.nav > ul > li {
text-align: center;
}
.nav > ul > li > a {
padding-left: 0;
}
/* Sub Menus */
.nav li ul {
position: absolute;
display: none;
width: inherit;
}
.nav li:hover ul {
display: block;
}
.nav li ul li {
display: block;
}
}
<div class="nav">
<ul>
<li>Home</li>
<li>Tutorials
<ul>
<li>Tutorial #1##</li>
<li>Tutorial #2</li>
<li>Tutorial #3</li>
</ul>
</li>
<li><a class="active" href="#">About</a></li>
<li>Newsletter
<ul>
<li>News #1</li>
<li>News #2###</li>
<li>News #3</li>
</ul>
</li>
</ul>
</div>
Here I have a working nav bar with a drop down menu. However I want two different hover effects on both the main nav bar and a different one for the drop down menu, I already have the main nav bar working with a hover effect by adding the below CSS code.
#nav_bar a:hover {
background:#8c1b1f;
padding-bottom:13px;
padding-top:17px;
padding-left:10px;
padding-right:10px;
}
I simply need a way of adding a separate hover effect to the drop down menu
You need to use CSS here this way:
#nav_bar>ul>li>a:hover {
//styles here for main menu hover
}
#nav_bar>ul>li>ul>li>a:hover {
//styles here for dropdown menu hover
}
So your CSS for the main menu hover will become:
#nav_bar>ul>li>a:hover {
background:#8c1b1f;
padding-bottom:13px;
padding-top:17px;
padding-left:10px;
padding-right:10px;
}
And you can use the following code to specify CSS for the dropdown menu hover:
#nav_bar>ul>li>ul>li>a:hover {
//styles here for dropdown menu hover
}
#nav_bar {
background-color: #a22b2f;
padding: 10px;
box-shadow: 0px 2px 10px;
}
#nav_bar ul {
text-align: center;
padding-left: 0px;
}
#nav_bar ul li {
display: inline-block;
}
#nav_bar ul li a {
color: white;
font-family: Arial;
text-decoration: none;
font-weight: bold;
padding: 15px;
}
#nav_bar ul li ul {
display: none;
}
#nav_bar ul li:hover ul {
display: block;
position: absolute;
padding: 0px;
background: white;
padding: 10px;
border: 1px solid black;
}
#nav_bar ul li:hover ul li {
display: block;
}
#nav_bar ul li:hover ul li a {
color: black;
}
#nav_bar>ul>li>a:hover {
color: blue;
background: #fff;
}
#nav_bar>ul>li>ul>li>a:hover {
color: red;
background: #000;
}
<div id="nav_bar">
<ul>
<li>HOME
</li>
<li>STATUS
</li>
<li>INFO
</li>
<li>GAMEMODES
<ul>
<li>GAMEMODE - SURVIVAL
</li>
<li>GAMEMODE - PURE-PVP
</li>
<li>GAMEMODE - GAMESWORLD
</li>
</ul>
</li>
<li>RULES
</li>
<li>VOTE
</li>
</ul>
</div>
I don't understand why the menu won't highlight on current page? on .menu ul li a:hover, .active {color: #788d35} If I put "background-color" instead of "color"it will work. How do I highlight just the text if current page is active?
HTML:
<section class="menu">
<ul>
<li><a class="active" href="home.html"> HOME </a></li>
<li> PORTFOLIO
<ul>
<li> illustrations </li>
<li> portraits </li>
<li> environments </li>
<li> sketches </li>
</ul>
</li>
<li> STORE
<ul>
<li> society6 </li>
<li> redbubble </li>
</ul>
</li>
<li> CONTACT </li>
<li> ABOUT </li>
</ul>
</section>
CSS:
.menu {
height: 29px;
width: 100%;
/*background:orange;*/
}
.menu ul {
width: auto;
list-style-type: none;
font-family: "calibri", "arial";
}
.menu ul li {
position: relative;
display: inline;
float: left;
width: auto;
border-right: 2px solid purple;
margin-left: 10px;
line-height: 12px;
}
.menu ul li:last-child {
border: none;
}
/*removes border after 'about'*/
.menu ul li a {
display: block;
padding: 3px;
color: #854288;
text-decoration: none;
font-size: 20px;
font-weight: strong;
padding-right: 25px;
}
.menu ul li a:hover,
.active {
color: #788d35
/* <-- if I put "background-color" instead of "color" it will work. How do I highlight just the text if current page is active? */
}
.menu ul li ul {
display: none;
}
.menu ul li:hover > ul {
display: block;
position: absolute;
top: 22px;
float: left;
text-align: left;
z-index: 1000;
background-color: white;
}
.menu ul li ul li {
position: relative;
max-width: 140px;
min-width: 140px;
width: 100%;
border: none;
margin-left: -40px;
}
.menu ul li ul li a {
padding: 4px;
margin-left: 1px;
}
Your .active selector is being overruled by the .menu ul li a selector. So you can either change .active selector to .menu ul li a.active or change the color property color: #788d35; to color: #788d35 !important;
See: http://jsfiddle.net/5mpjj/
For more information: http://hungred.com/useful-information/css-priority-order-tips-tricks/
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...