CSS
.nav {
margin-top: 0px;
margin-left: 0%;
}
.nav ul {
width: 100%;
height: auto;
background-color: #fff;
margin-bottom: 0px;
margin-top: 0px;
display: absolute;
z-index: 2;
/*top: -124px;*/
position: fixed;
border-bottom: 2px #009759 solid;
}
.nav ul li {
margin-top: 5px;
color: white;
list-style-type: none;
display: inline;
padding-left: 15px;
padding-right: 15px;
padding-top: 20px;
padding-bottom: 22px;
border-radius: 0px;
}
.nav ul li a
{
color: #009759;
text-decoration:none;
}
.nav ul li active {
color: #ff0000;
}
What is the best way to make a dropdown menu from one of my header menu buttons? I inlcuded my CSS file for the header but now I need you to tell me how to make a dropdown.
You can make a dropdown in many ways.. the usual method is by making javascript codes that will handle the hover event on the selected menu..
there are many good tutorials online that can help you.. like this dropdown with javascript
but if you are looking for pure css dropdown, you can also look at this link: dropdown pure css
You could use Jquery for this. I have done this before, and while it may seem a bit crude with the code, it works wonderfully.
$(".nav ul, .nav ul li, .nav ul li a").hide();
$(".nav").hover(function(){
$(".nav ul, .nav ul li, .nav ul li a").show(500);
});
Related
I have been trying to make my navbar responsive. So far I managed to display all li items underneath each other when the screen gets to small. However some li's of my navbar have sub items which normally drops down (Classes has 3 sub li's). When hovering one of the li's which has subitems it renders them through the main li items of the nav bar.
What I want is that the submenus dont get triggered by hovering, but only when the user taps their screen. Afterwards it should display the submenu items underneath the parent li and then continue with the other main li's.
The code underneath is the working part for the fullscreen nav bar.
Demo
.nav a {
text-decoration: none;
color: #fff;
display: inline-block;
padding-left: 15px;
padding-right: 15px;
border-bottom: none;
transition: .5s background-color;
}
.nav ul {
list-style: none;
background-color: #522d54;
text-align: center;
padding: 0;
margin: 0;
display: block;
}
.nav li {
font-family: 'Allerta', Helvetica, Arial, sans-serif;
width: auto;
line-height: 40px;
border-bottom: none;
font-size: 1em;
display: inline-block;
text-align: left;
}
.nav a:hover {
background-color: #39203b;
}
.nav a.active {
cursor: default;
background-color: #824885;
box-shadow: inset 0em -.2em #b084b3;
}
.nav ul li {
position: relative;
display: inline-block;
}
.nav ul li ul li {
text-align: center;
padding: 0;
width: 100%;
}
.nav li ul li a {
text-align: left;
font-size: .8em;
white-space: nowrap;
padding-left: 15px;
padding-right: 15px;
display: block;
}
.nav ul li ul {
position: absolute;
display: none;
width: inherit;
}
.nav li:hover ul {
display: inline-block;
}
You need to override your hover display with none, because you no longer want it to show on hover.
#media screen and (max-width: 650px) {
.nav li:hover ul {
display: none;
}
}
Then you will need to use javascript or jquery to add a class to the li on click:
jQuery could be something like (assumes you have class 'sub' on items with sub menus):
$('.nav li.sub').click(function() {
$(this).toggleClass('open-sub-menu');
});
New class is:
.nav li.sub.open-sub-menu ul {
position:relative;
display:block;
}
Thank you so much that truly did the trick. I am a complete jquery/js noob so this was extremely helpful. Somehow it took me 15 minutes to figure out I had not linked to jquery in the head tags.
For those with the same problem as me make sure to put this in between the tags of your html.
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
This is a frequently addressed problem in SO, but almost 5 of the threads here didn't offer any help. The dropdown menu items are not staying open unless I hover over the initial item many times. I can't locate the problem in a specific class, any help would be appreciated.
Here is the CSS Code:
nav ul {
list-style: none;
}
nav ul li {
display: block;
float: right;
}
nav ul ul {
display: none;
position: relative;
margin-top: 60px;
}
nav ul li:hover > ul {
display: block;
position: absolute;
margin-left: -30px;
}
nav ul ul li {
width: 170px;
float: none;
display: block;
}
#navigation_bar a {
display: block;
float: right;
padding: 5px;
font-size: 25px;
color: black;
}
#navigation_bar a:hover {
border-radius: 20px;
color: #FFFFFF;
transition: color 0.2s;
}
div nav {
display: block;
}
And here is the corresponding HTML code:
<div id="navigation_bar">
<nav>
<ul>
<li>شركتنا</li>
<li>الخدمات</li>
<li>المركز الإعلامي
<ul>
<li>آخر الأخبار</li>
<li>معرض الصور</li>
</ul>
</li>
<li>التحميلات</li>
<li>اتصل بنا</li>
</ul>
</nav>
</div>
It's because there's a bit of a gap between the parent nav and the child dropdown. When you try to hover on the child dropdown and your cursor passes over this gap, you lose the li:hover state hence the dropdown hides.
nav ul ul {
...
margin-top: 43px;
...
}
https://jsfiddle.net/mq29ac39/1/
Now compare this one with the original margin-top: 63px
https://jsfiddle.net/mq29ac39/2/
I added background a color to give a better visual idea about the gap
Been reading and leaving out the advanced stuffs for future but this one seems to be fairly easy and straight forward but still can't get it.
<div class="sidenav">
<h3>Photo Archives</h3>
<ul>
<li><a href="../photos.html" class="selected" >2015</a>
<ul>
<li>Singapore</li><li>England</li>
</ul>
</li><li>2014
</li><li>2013
</li><li>2012
</li><li>2011
</li><li>2010
<ul>
<li>Philippines</li>
</ul>
</li><li>2009
</li>
</ul>
</div>
CSS bit here. This one is in primary css file.
.sidenav {
padding-top: 5%;
padding-left: 2%;
display: table-cell;
position: relative;
width: 20%;
vertical-align: top;
background-color: #c01f2c;
text-align: center;
/*border: 1px solid green;*/
}
.sidenav h3 { padding-bottom: 15px;}
.sidenav ul{ position:relative; }
.sidenav ul li:hover, .selected{
background-color: #2e2e2e;
}
.sidenav ul li a {
color:white;
display: block;
line-height: 3rem;
font-size: 1.25rem;
}
.sidenav ul li:hover ul {
display: block;
position: relative;
}
.sidenav ul li ul li:hover, .selected{
border-left: 5px solid white;
}
.sidenav ul ul {
position: absolute;
display: none;
width: inherit;
background-color: #c01f2c;
padding-right: 10px;
}
.sidenav ul ul a {
font-size: 1rem;
text-align: right;
padding-right: 10px;
Following CSS is exclusively for this page - 2015.html - which I have made reference to later than the main css file in the header.
.sidenav ul ul {
position: relative;
display: block;
width: inherit;
background-color: #c01f2c;
padding-right: 10px;
}
Problem is I can't seem to select just the first ul which is first submenu with 2015.html. If I leave it as it is now, it will select both ul from 2015 and 2010. I want to select just the 2015 submenu. I've tried child, descendant, combinations all kind of selecting techniques but to no avail.
I know the thing I'm trying to do can be done with simple java but I don't want to jump to it yet. Want to keep it css and simple.
You may want to consider using first-of-type, assuming 2015 is always in the first child li of the menu ul:
.sidenav ul li:first-of-type ul {
// styles
}
The :first-of-type CSS pseudo-class represents the first sibling of
its type in the list of children of its parent element.
With that said, given that the only valid children of a ul is li you can substitute with :first-child
Your rule .sidenav ul ul targets all ul sub-children.
You need to use the :first-of-type pseudo-class if you only want to target the first child
.sidenav ul ul:first-of-type
Try this out ,
As you need to select the first ul in the first sub menu
.sidenav > ul ul:first-child {
position: relative;
display: block;
width: inherit;
background-color: #c01f2c;
padding-right: 10px;
}
To make something dynamic use this:
.sidenav ul li a.selected + ul {
position: relative;
display: block;
width: inherit;
background-color: #c01f2c;
padding-right: 10px;
}
Working fiddle: http://jsfiddle.net/alessiozuccotti/uannpmf6/
This is what it should look like:
There is a tab-menu and a dropdown area. This should always have the same position (but different content and the respective tab choosen) as in the picture. Meaning it should always be as wide as the tabs(-menu).
But I can not figure out how:
to get this responsive
how to have the dropdown area stay where it is
how to style the subitems (in the dropdown area)
Here is what I got so far (sorry for the huge css it is not cleaned yet!), the menu starts at line 1559.
http://jsfiddle.net/pxpHw/
How do I do this properly?
THANKS!
code:
// css
nav {
cursor: default;
}
a {
text-decoration: none;
color: #000000;
}
#menu ul {
margin: 0px;
padding: 0px;
left: 0;
list-style-type: none;
background:green;
z-index: 100;
max-width: 60em;
}
#menu li {
float: left;
width: 20%;
text-align: center;
}
#menu li ul {
display: none;
/*display: block;*/
padding-top: 3px;
}
#menu li:hover ul {
display: block;
}
#menu li ul li {
background-color: #2F2D49;
border-bottom: 1px solid #FFFFFF;
width: 100%;
max-width: 60em;
min-height: 30em;
position: absolute;
}
#menu li ul li a {
color: #FFFFFF;
}
#menu li ul li:hover {
background-color: #232323;
}
Use media queries to get the responsive design
Check the following links
http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/
http://mediaqueri.es/
Thanks
AB
This is what I was looking for: (Columns and Layout tab)
http://codecanyon.net/item/css3-full-responsive-dropdown-menu/full_screen_preview/4528828
I am trying to make a left nav menu for my web page, which is to look something like the following image:
Here is the jsfiddle of the problem I am facing. http://jsfiddle.net/rzr4Z/
My html looks like the following
<ul id="nav">
<li>First<img src="images/navbar-icons/first.png" />
</li>
<li>Second<img src="images/navbar-icons/second.png" />
</li>
<li>Third<img src="images/navbar-icons/third.png" /> <img
src="images/navbar-icons/third.png" />
<ul id="side-menu">
<li><img src="images/navbar-icons/submenu-img.png" alt="sub menu image" />
</li>
<li>Sub-menu item 1</li>
<li>Sub-menu item 2</li>
<li>Sub-menu item 1</li>
</ul></li>
<li>Fourth<img src="images/navbar-icons/fourth.png" />
</li>
</ul>
CSS:
ul#nav {
list-style-type: none;
margin: 10px 0;
padding: 0;
text-align: center;
}
ul#nav li {
font-size: 250%;
line-height: 25px;
padding: 7px 0;
margin: 0;
}
ul#nav li a {
display: block;
}
ul#nav li a:link,ul#nav li a:visited {
color: #333333;
text-decoration: none;
}
ul#nav li a:hover,ul#nav li a:active {
color: #a61607;
text-decoration: none;
}
ul#nav li img {
display: none;
}
ul#nav a:hover#first_id+img {
display: block;
position: relative;
top: -25px;
}
ul#nav a:hover#second_id+img {
display: block;
position: relative;
top: -25px;
}
ul#nav a:hover#third_id+img {
display: block;
position: relative;
top: -25px;
}
ul#nav a:hover#fourth_id+img {
display: block;
position: relative;
top: -25px;
}
ul#nav li ul#side-menu {
display: none;
position: absolute;
}
ul#nav li:hover ul#side-menu {
font-size: 30%;
list-style-type: none;
line-height: 2px;
color: #a61607;
text-decoration: none;
display: block;
position: absolute;
top: 310px;
left: 250px;
}
ul#nav li:hover ul#side-menu li {
float: none;
}
ul#nav li:hover ul#side-menu li img {
position: absolute;
top: 400px;
left: 0px;
}
Instead of doing something like,
ul#nav a:hover+img {
display: block;
position: relative;
top: -25px;
}
I had to use different ID's for each of the li elements in the css because each of the rollover image has a different size and width so that I could adjust them individually for their correponding rollover positions. Is using different ID's for each of the menu items the right way to get the desired effect?
The main problem however is when I hover the images for each of the menu items, I start getting a fluttering effect, and the hover effect doesn't look easy to the eyes with that kind of fluttering.
The images for the sub-menu (the sub-menu items do appear, but the img doesn't appear) also doesn't appear when hovering over #third-page menu item.
Any suggestions on how to resolve this fluttering, and getting the correct effects for this menu?
Using different IDs is fine in your case. As for the fluttering problem, I was able to eliminate it by changing this part of your CSS:
ul#nav a:hover#first_id+img {
display: block;
position: relative;
top: -25px;
}
ul#nav a:hover#second_id+img {
display: block;
position: relative;
top: -25px;
}
ul#nav a:hover#third_id+img {
display: block;
position: relative;
top: -25px;
}
ul#nav a:hover#fourth_id+img {
display: block;
position: relative;
top: -25px;
}
to this:
ul#nav li:hover #first_id+img {
display: block;
}
ul#nav li:hover #second_id+img {
display: block;
}
ul#nav li:hover #third_id+img {
display: block;
}
ul#nav li:hover #fourth_id+img {
display: block;
}
What was happening was, when you hover over the third link, the size of the image would push the link so that it was centered within the li. And if your mouse happened to be hovering to the left or right of the link once the image appeared, you weren't hovering over the link anymore, so it would disappear, then immediately reappear because now you are again hovering over the link... etc.
Detecting the :hover over the li itself fixes this so that the image appears if you are hovering over the li itself, regardless of if you are hovering over the link, image, or any space around them.
Hope this helps.
The trick to fixing your issue is two things:
1) Make the LI items fixed-width
2) Make the "hover" effect occur on the LI, not on the A
The reason you are experiencing "flicker" is exactly what's been described above. When you are applying the :hover effect to the A tag, and the tags aren't fixed in size, you wind up in some positions where your mouse causes the :hover, the :hover moves the object that caused it out from under the mouse - and that causes the effect to end, putting the object back under the mouse - which causes it again. Endless cause'n'effect which gives you flicker.
By putting the :hover effect on the LI instead, you cause the :hover to be raised whether the mouse is over the A OR the IMG - so when the IMG tag pops visible and everything shifts size, your mouse is still hovering over the LI that contains both elements - and voila - no flicker.
There is another issue caused by your approach, however, due to the size of the images. Because your images are shunting things downward due to their height (big images) - when you get to the bottom of the image, and roll over the next LI - everything will shift out from under your mouse and cause a similar issue. This, however, will generally not cause flicker per-se.
Please see the following update to your jsFiddle.
As you will see, the "height" issue occurs on the "Third" entry. This, too, is solvable by explicitly setting height / width and using images of an exact size - OR (more effectively) by using background: url(...); CSS rules rather than IMG tags - because they are far easier to clip / resize.
If you need an example of some other CSS-based rollover menus with sub-menus, please take a look at this jsFiddle, which demonstrates a more modular approach to dropdown menus and such. It could be modified to suit your needs pretty easily with the use of background graphics.
This problem happens when we do not specify following css attributes:
min-width, max-width, and
min-height, max-height
And carefully using the following css attributes can help:
#parent_id:hover
{
//use borders to find space required for correct width/height
}
#parent_id>#child_id:hover
{
//use borders to find space required for correct width/height
}
#parent_id:hover, #child_id:hover
{
//use borders to find space required for correct width/height
}
So make sure that you add these.
Remember this always:
Never do css without borders, always make sure that you add borders to almost all nodes,
this helps to clearly understand how much space is being occupied and it is more easy to workout errors in css like this
ul#nav {
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
position:absolute;
height:300px;
width:200px;
max-height:300px;
max-width:200px;
border:5px solid red;
overflow:hidden;
}
ul#nav li {
border:1px solid green;
font-size: 250%;
line-height: 25px;
max-height:200px;
padding: 7px 0;
margin-top: 10px;
max-height:50px;
}
ul#nav li a {
border:1px solid black;
}
ul#nav li a:link,ul#nav li a:visited {
color: #333333;
text-decoration: none;
}
ul#nav li a:hover,ul#nav li a:active {
max-height:50px;
color: #a61607;
text-decoration: none;
}
ul#nav li img {
display: none;
}
ul#nav a:hover#first_id+img {
display: block;
}
ul#nav a:hover#second_id+img {
display: block;
}
ul#nav a:hover#third_id+img {
display: block;
}
ul#nav a:hover#fourth_id+img {
display: block;
}
ul#nav li ul#side-menu {
display: none;
}
ul#nav li:hover ul#side-menu {
font-size: 30%;
list-style-type: none;
line-height: 2px;
color: #a61607;
text-decoration: none;
display: block;
position: absolute;
top: 310px;
left: 250px;
}
ul#nav li:hover ul#side-menu li {
float: none;
}
ul#nav li:hover ul#side-menu li img {
position: absolute;
width:48px;
height:48px;
top: 400px;
left: 0px;
}
Now it is not fluttering
Your code:
ul#nav {
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
position:absolute;
max-height:300px;
max-width:200px;
border:5px solid red;
overflow:hidden;
}
My code:
ul#nav {
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
position:absolute;
height:300px;
width:200px;
max-height:300px;
max-width:200px;
border:5px solid red;
overflow:hidden;
}
Carefully look at my last answer, you have missed significant attributes like height:300px; and width:200px;
Simply specifying max,min-prefixed attributes is not enough, you should add specific height and width settings, only then fluttering disappears.
You can either do:
ul#nav li a{display: block;}
or
ul#nav li{text-align: left;}
so mouseleave doesn't fire on mouseenter