I created an horizontal menu with a submenu. On jsfiddle I don't know with the submenu isn't working correctly at 100% instead on local it does. Here is the working link: http://jsfiddle.net/IronFeast/g8MDP/
And here is the code:
<ul id="navbar">
<li>Home</li>
<li>Gallery
<ul class="submenu">
<li>Photogallery 1</li>
<li>Photogallery 2</li>
<li>Photogallery 3</li>
</ul>
</li>
<li>Events</li>
<li>Blog
<ul class="submenu">
<li>Personal</li>
<li>Dev</li>
</ul>
</li>
<li>About
<ul class="submenu">
<li>Page 1</li>
<li>Page 2</li>
</ul>
</li>
CSS:
#navbar {
background-color: #4E78B4;
position: absolute;
text-align: center;
margin: 0;
padding-bottom: 7px;
padding-top: 7px;
float: left;
left: 10px;
width: 940px;
font-size: 14px;
z-index: 100;
}
#navbar li {
list-style: none;
float: left;
color: #E9EBDE;
padding-left: 24px;
padding-right: 4px;
z-index: 100;
}
#navbar li a {
display: inline;
padding-top: 7px;
padding-bottom: 7px;
padding-right: 8px;
padding-left: 8px;
text-transform: uppercase;
text-decoration: none;
font-weight: bold;
color: #ffffff;
z-index: 100;
text-align: center;
}
#navbar ul li a {
display: block;
padding-top: 6px;
padding-bottom: 3px;
padding-right: 8px;
padding-left: 8px;
text-decoration: none;
z-index: 100;
}
#navbar li a:hover {
color: #000000;
background-color: #ffffff;
padding-right: 8px;
padding-left: 8px;
z-index: 100;
}
#navbar li ul{
display: none;
background-color: #41B6DC;
z-index: 100;
}
#navbar li:hover ul, #navbar li.hover ul {
position: absolute;
display: block;
left: 0;
width: 940px;
margin: 0;
padding: 0;
z-index: 100;
margin-top: 7px;
}
#navbar li:hover li, #navbar li.hover li {
float: left;
z-index: 100;
}
#navbar li:hover li a, #navbar li.hover li a {
color: #000;
z-index: 100;
}
#navbar li li a:hover {
color: #4E78B4;
z-index: 100;
}
At the moment when I go with the mouse over the "Gallery", the submenu will open, but if I click on "Photogallery 1" I will go to that page but unfortunately the menu will close when I am in that page.
I'd like that "Gallery" will be highlighted, the submenu will stay opened and also the "Photogallery 1" button will be highlighted.
Any help would be awesome. Thank you in advance
You must add on photogallery1.php, photogallery2.php, etc class attribute with hover as value.
<ul id="navbar">
<li>Home</li>
<li class="<?php echo $_COOKIE["hover"]; ?>">Gallery
<ul class="submenu">
<li>Photogallery 1</li>
<li>Photogallery 2</li>
<li>Photogallery 3</li>
</ul>
...
...
</ul>
also add on your css:
.selected {
background-color: #ffffff;
}
It better to use cookie to save menu state.
I found this tutorial http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu maybe it can help you but i think you will need to ajust the html and css :S
Hope it helps you
Related
This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed 4 years ago.
I have ol in my header of the page. In last two there is an Username and profile pic. And I want to show dropdown menu on hover over username or profile pic. But it is not displaying menu on hover. There is one lebel inside my dropdown-content.In mozilla it is not showing anything on hover and in chrome it is also not showing on hover but by default it is showing label.
.head{
top:0;
background:#424242;
padding:1px;
height:10%;
}
li{
display:inline-block;
color:#E0E0E0;
cursor:pointer;
padding:10px 10px 2px 10px;
font-size:20px;
}
li:hover{
color:white;
}
li.active{
color:white;
border-bottom:1px solid white;
}
.right{
float:right;
color:white;
}
#profilepic{
border-radius:50%;
width:40px;
height:40px;
margin:-10px 50px 0 20px;
}
.dropdown-content {
display:none;
position: absolute;
background-color: #f1f1f1;
min-width: 150px;
right:0;
margin-right:20px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content label {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content label:hover {background-color: #ddd;}
.right:hover .dropdown-content {display: block;}
<div class="head">
<ul>
<li>HOME</li>
<li onClick="NewApplication();">NEW APPLICATION</li>
<li onClick="PendingApplication();">PENDING APPLICATION</li>
<li onClick="Customer();">APPROVED</li>
<li>LOAN STRUCTURE</li>
<li class="right"><img id="profilepic" src="images/emp2.jpg"></li>
<li class="right">ABC</li>
</ul>
<div class="dropdown-content">
<label onClick="Setting();">SETTINGS</label>
</div>
</div>
Please restructure your html like so, this will be ideal for showing the dropdown.
The below class will be used to show the hidden dropdown.
.show-settings:hover .dropdown-content {
display: block;
}
.right {
float: right;
color: black;
position:relative;
}
#profilepic {
border-radius: 50%;
width: 40px;
height: 40px;
margin: -10px 50px 0 20px;
}
.show-settings:hover .dropdown-content {
display: block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 150px;
right: 0;
margin-right: 20px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
overflow: hidden;
}
.dropdown-content label {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content label:hover {
background-color: #ddd;
}
<div class="head">
<ul>
<li>HOME</li>
<li onClick="NewApplication();">NEW APPLICATION</li>
<li onClick="PendingApplication();">PENDING APPLICATION</li>
<li onClick="Customer();">APPROVED</li>
<li>LOAN STRUCTURE</li>
<li class="right show-settings">
<img id="profilepic" src="http://via.placeholder.com/50x50"> username
<div class="dropdown-content">
<label onClick="Setting();">SETTINGS</label>
</div>
</li>
</ul>
</div>
Putting space between two CSS selctors (.class1 .class2), specify that you want a hirarchy - when .class2 is nested inside class1. You can't by CSS only to get the parent of an element. So, to solve your problem, you should do it by js, or including .dropdown-content inside the <ul> element (change it from <div> to <li>, because inside lists only <li> elements are valid), and then access it by CSS3's general sibling selector (or by CSS3's adjacent sibling selector, I don't use it here):
Solution 1:
.right {
float: right;
}
#profilepic {
border-radius: 50%;
width: 40px;
height: 40px;
margin: -10px 50px 0 20px;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 150px;
right: 0;
margin-right: 20px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content label {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content label:hover {
background-color: #ddd;
}
.right:hover ~ .dropdown-content, /* or ".right:hover + .dropdown-content" with adjacent sibling selector */
.dropdown-content:hover /* For the dropdown won't disappear when hover it */ {
display: block;
}
<div class="head">
<ul>
<li>HOME</li>
<li onClick="NewApplication();">NEW APPLICATION</li>
<li onClick="PendingApplication();">PENDING APPLICATION</li>
<li onClick="Customer();">APPROVED</li>
<li>LOAN STRUCTURE</li>
<li class="right"><img id="profilepic" src="images/emp2.jpg"></li>
<li class="right">ABC</li>
<li class="dropdown-content">
<label onClick="Setting();">SETTINGS</label>
</li>
</ul>
</div>
Solution 2:
window.onload = function() {
var dropdown = document.querySelector('.dropdown-content');
document.querySelectorAll('.right').forEach(function(el) {
el.addEventListener('mouseover', function() {
dropdown.style.display = 'block';
}, false);
el.addEventListener('mouseout', function() {
dropdown.style.display = 'none';
}, false);
});
};
.right {
float: right;
}
#profilepic {
border-radius: 50%;
width: 40px;
height: 40px;
margin: -10px 50px 0 20px;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 150px;
right: 0;
margin-right: 20px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content label {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content label:hover {
background-color: #ddd;
}
<div class="head">
<ul>
<li>HOME</li>
<li onClick="NewApplication();">NEW APPLICATION</li>
<li onClick="PendingApplication();">PENDING APPLICATION</li>
<li onClick="Customer();">APPROVED</li>
<li>LOAN STRUCTURE</li>
<li class="right"><img id="profilepic" src="images/emp2.jpg"></li>
<li class="right">ABC</li>
</ul>
<div class="dropdown-content">
<label onClick="Setting();">SETTINGS</label>
</div>
</div>
I'm currently trying to expand on my nav bar by adding a drop-down menu. I've tried everything, but nothing seems to be working. Is there any way for me to add drop-down functionality without having to re-create my entire nav bar?
div.content a:link {
color: #000000;
text-decoration: normal;
}
div.content a:visited {
color: #000000;
text-decoration: normal;
}
div.content a:hover {
color: #383838;
text-decoration: normal;
-o-transition: .3s;
-ms-transition: .3s;
-moz-transition: .3s;
-webkit-transition: .3s;
transition: .3s;
}
div.content a:active {
color: #000000;
text-decoration: normal;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #595959;
max-width: 950px;
min-width: 900px;
margin: auto;
box-shadow: 0px 0px 5px #000000;
margin-bottom: 15px;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
font-style: normal;
padding: 14px 16px;
text-decoration: none;
-o-transition: .3s;
-ms-transition: .3s;
-moz-transition: .3s;
-webkit-transition: .3s;
transition: .3s;
}
li a:hover {
background-color: #404040;
}
<div class="nav">
<ul>
<li>Home
</li>
<li>YouTube
</li>
<li>Twitter
</li>
<li>Services
</li>
<li>Contact
</li>
</ul>
</div>
Unless you're trying to teach yourself, don't reinvent the wheel.
Link 1
Link 2
<div class="pure-menu pure-menu-open pure-menu-horizontal">
<ul>
<li class="pure-dropdown">
Test1
<ul>
<li>Test2</li>
<li class="pure-menu-separator"></li>
<li>Test3</li>
</ul>
</li>
<li class="pure-dropdown">
Test1
<ul>
<li>Test2</li>
<li>Test3</li>
<li>Test4</li>
<li>Test5</li>
</ul>
</li>
</ul>
</div>
With CSS
#import url("http://yui.yahooapis.com/pure/0.5.0/pure-min.css");
.pure-menu-horizontal ul {
padding:0;
margin:0;
font-weight: bold;
width: 100%;
position: relative;
}
.pure-menu-horizontal ul li {
float:left;
position: relative;
display: block;
}
.pure-menu-horizontal ul li a {
display:block;
}
.pure-menu-horizontal ul ul {
display: block;
position: absolute;
top: 35px;
}
.pure-menu-horizontal ul li:hover > ul {
display: list-item;
left: auto;
visibility: visible;
}
Link 3
Can anyone suggest what might be the problem on my flickering menu bar?
Please suggest anything that will make the flickering of menu bar stop.
Thanks much!
#mainmenu{
margin-bottom: 2.5em;
}
.menubar{
position: fixed;
top:0;
left:0;
max-height:10em;
width:100%;
list-style: none;
background-color:#333333;
text-align: left;
margin:0;
padding: 0;
z-index: 1;
border-bottom: 1px solid #ccc;
}
.menubar .first {
margin-left: 1em;
}
.menubar li{
position: relative;
display: inline-block;
width:15em;
text-align: center;
font-family: 'Oswald', sans-serif;
font-size: 1em;
border-bottom: none;
cursor: pointer;
}
.menubar li:hover{
background-color:#6666ff;
}
.menubar a{
display: block;
padding: 0.5em 0.5em 0.5em 0.5em;
text-decoration: none;
color:#ffffff;
}
/* for submenus */
.menubar .first .submenubar {
padding: 0;
position: absolute;
top:2em;
left:0;
width:auto;
display: none;
-webkit-box-shadow: 0px 13px 25px rgba(0,0,0, 0.2);
-moz-box-shadow: 0px 13px 25px rgba(0,0,0, 0.2);
box-shadow: 0px 13px 25px rgba(0,0,0, 0.2);
}
.menubar li .submenubar li {
text-align: left;
list-style-type: none;
background-color:brown;
display: block;
color:#fff;
}
.menubar > li > .submenubar > li:hover {
background-color:black;
}
.menubar li:hover .submenubar{
display: block;
}
See this JsFiddle for my complete code.
I suspect that one of 2 things are happening.
Is the whole header "flickering" when you go to a new page? If so,
that's because you are building an html page from your php on the
server and then rendering the page again. Sometimes this will flash.
Sucks.
The sub-menu appears to "flicker" because it's broken and when you
try and hove over it, it disappears.
If it's 1, you can use caching to try and lessen the chances of this happening, or you can learn how to use ajax, or a js framework to build single page apps, but that's a lot of work.
If it's 2, then this code I'll include below, and this fiddle - will set you up with some more solid code to work with.
My real advice, is to just never use drop-down menus. They are a terrible interface pattern.
HTML
<nav class='container navigation'>
<div class='inner-w'>
<ul class='menu'>
<li>
<a href='#'>Top-level menu item 1</a>
<ul class='sub-menu'>
<li><a href='#'>Sub-menu item 1</a></li>
<li><a href='#'>Sub-menu item 2</a></li>
<li><a href='#'>Sub-menu item 3</a></li>
<li><a href='#'>Sub-menu item 4</a></li>
</ul>
</li>
<li><a href='#'>Top-level menu item 2</a></li>
<li>
<a href='#'>Top-level menu item 3</a>
<ul class='sub-menu'>
<li><a href='#'>Sub-menu item 1</a></li>
<li><a href='#'>Sub-menu item 2</a></li>
</ul>
</li>
<li><a href='#'>Top-level menu item 4</a></li>
</ul>
</div>
</nav>
CSS
/* global-structure */
.container {
width: 100%;
float: left;
}
.container .inner-w {
margin-right: auto; margin-left: auto;
max-width: 900px; /* arbitrary */
/* this should have a clear-fix */
}
/* menu styles */
.menu, .menu ul {
list-style: none;
margin: 0;
padding: 0;
}
.menu li {
float: left;
}
.menu > li { /* just the top-level li */
position: relative;
/* so the sub-menu can be positioned to this */
border-right: 1px solid rgba(0,0,0,.3)
}
.menu > li:last-child {
border-right: 0;
}
.menu a {
display: block;
padding: .8rem .5rem;
background: #eee;
min-width: 160px;
color: inherit;
text-decoration: none;
}
.sub-menu {
position: absolute;
top: 100%;
left: 0;
height: 0;
width: 0; /* just hide it visually */
overflow: hidden;
z-index: 5; /* arbitrary, keep them small though... */
}
.sub-menu li {
clear: left;
border-bottom: 1px solid rgba(0,0,0,.3)
}
.sub-menu li:last-child {
border-bottom: 0;
}
.sub-menu a {
background: #ccc;
}
.sub-menu a:hover {
background: #aaa;
}
.menu > li:hover .sub-menu {
height: auto;
width: auto;
}
If I was absolutely forced to write a drop-down menu, It would have to be like this: http://codepen.io/sheriffderek/pen/qdBryb/?editors=010
I am creating a menu bar with rollovers, when i roll over the option the background and text colour change but when i move my mouse down to the sub menu that appeared with hovering on the menu the text colour changes back but the background stays.
This is my HTML for the menu bar:
<div id="menuBar">
<div id="nav">
<div id="nav_wrapper">
<ul>
<li class="bar">Home
</li>
<li class="bar"> Services
</li>
<li class="bar"> Sales →
<ul>
<li class="bar">dropdown #1 item #1
</li>
<li class="bar">dropdown #1 item #2
</li>
<li class="bar">dropdown #1 item #3
</li>
</ul>
</li>
<li class="bar"> Repairs →
<ul>
<li class="bar">Bar
</li>
<li class="bar">Kitchen
</li>
<li class="bar">dropdown #2 item #3
</li>
</ul>
</li>
<li class="bar"> Installations
</li>
<li class="bar"> Contact Us
</li>
</ul>
</div>
<!-- Nav wrapper end -->
And the CSS that im using:
#menuBar {
background:#FF0;
box-shadow:5px 5px 2px #888888;
position:absolute;
height:55px;
width:1000px;
left:0;
right:0;
margin:auto;
top:253px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
behavior: url(/css/border-radius.htc);
z-index:5;
}
#nav {
padding: 0;
margin: 0;
font-family: Arial;
font-size: 21px;
left:0;
right:0;
margin:auto;
}
#nav_wrapper {
width: 960px;
margin: 0 auto;
text-align: center;
}
#nav a {
color:#0000FF;
}
#nav a:hover {
color:#FF0;
}
#nav a:active {
color:#FF0;
}
#nav a::focus {
color:#FF0;
}
#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: #00F;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
color:#FF0;
border-radius: 10px;
behavior: url(/CSS/border-radius.htc);
}
#nav ul li a, visited {
display: block;
padding: 15px;
text-decoration: none;
}
#nav ul li:hover ul {
display: block;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
-khtml-border-radius: 15px;
color:#FF0;
border-radius: 15px;
behavior: url(/CSS/border-radius.htc);
}
#nav ul ul {
display: none;
position: absolute;
background-color: #FFFF00;
border: 3px solid #00F;
border-top: 1;
margin-left: -5px;
}
#nav ul ul li {
display: block;
}
#nav ul ul li a:hover {
color:#FF0;
}
.bar {
color:#FF0;
}
Im sure that im missing something simple but i cant find it at all.
Help!
Building on what Niet the Dark Absol said:
you would need to add styles (notice the > - this selects ONLY direct children, works with IE8+ and elsewhere)
#nav ul li:hover > a {
color: #ff0;
}
and you can probably remove this because it would be redundant:
#nav ul ul li a:hover {
color:#FF0;
}
You are applying the color change to a:hover, but the background-color change to li:hover.
Both must be on the li:hover to work. You may need to add color:inherit to the a elements within the menu to ensure natural link colours don't override the setting.
This file below is working alone as menu.php, but when I include it in another file using
<?php include("menu.php") ?>
it generates a line break. But why is that I don't understand, I tried several times, but not solved. So, please help me guys and girls.
<style>
/* Menu style starts*/
nav ul li:hover > ul {
display: block;
}
nav ul {
background: maroon;
background: linear-gradient(top, maroon 0%, #800000 100%);
background: -moz-linear-gradient(top, maroon 0%, #800000 100%);
background: -webkit-linear-gradient(top, maroon 0%,#800000 100%);
list-style: none;
display: inline-table;
position: relative;
padding: 0 15px;
box-shadow: 0px 0px 20px #888888;
}
nav ul:after {
content: "";
clear: both;
display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
background: #4b545f;
background: linear-gradient(top, black 0%, #5f6975 40%);
background: -moz-linear-gradient(top, black 0%, #5f6975 40%);
background: -webkit-linear-gradient(top, black 0%,#5f6975 40%);
}
nav ul li:hover a {
color: #fff;
}
nav ul li a {
display: block;
padding: 10px 38px;
text-decoration: none;
color: white;
font-size: 19px;
font-weight: bold;
}
nav ul ul {
display: none;
background: #5f6975;
border-radius: 0px;
padding: 0;
position: absolute; top: 100%;
}
nav ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}
nav ul ul li a {
padding: 10px 40px;
color: white;
font-size: 12px;
font-weight: bold;
}
nav ul ul li a:hover {
background: #4b545f;
}
nav ul ul ul {
position: absolute; left: 100%; top:0;
}
/* Menu style ends*/
</style>
<div align="center"
style="height: 100px; color: #FFFFFF; background-color: #0033CC;">
<font size="12" style="z-index:; margin-bottom:0px;">
Open Public Library
</font>
<br />
<font size="4">
It's still under process, coming soon with full facility
</font>
</div>
<nav align=center>
<ul>
<li><a href="index.php">
<!--img src="images/home_icon.png"/-->HOME
</a>
</li>
<li>ABOUT US</li>
<li>USER
<ul>
<li>LOGIN
<ul>
<li>GUEST</li>
<li>MEMBER</li>
<li>ADMINISTRATOR</li>
</ul>
</li>
<li>REGISTRATION</li>
</ul>
</li>
<li>BOOK
<ul>
<li>INSERT</li>
<li>UPDATE</li>
<li>SHOW</li>
<li>SEARCH</li>
</ul>
</li>
<li>CONTACT US
<ul>
<li>GIVE FEEDBACK</li>
<li>SEE CONTACTS</li>
</ul>
</li>
<li>REGISTER</li>
</ul>
</nav>
If you are using UTF-8 encoding, save file as UTF-8 without BOM