I have created a very basic hover css menu for a joomla site (I don't really want to get into jQuery if I can avoid it). It works fine in everything except IE (10,9...).
When you hover over the top level and move the move over the child menu the child menu persists in everything except IE.
How do I get IE to play ball?0
Here's the html:
<ul class="menu" id="mainMenu">
<li class="item-210"><a href="/index.php/home-2" >Home</a></li>
<li class="item-213 current active deeper parent"><a href="/index.php/xbus2" >xBus</a>
<ul>
<li class="item-214"><a href="/index.php/xbus2/vision" >Vision</a></li>
<li class="item-215"><a href="/index.php/xbus2/timetable" >Timetable</a></li>
<li class="item-217"><a href="/index.php/xbus2/xbus-mini" >xBus Mini</a></li>
<li class="item-218"><a href="/index.php/xbus2/xbus2" >xBus2</a></li>
</ul>
</li><li class="item-220 deeper parent"> etc ....
and here's the css
ul#mainMenu li {
position:relative;
}
ul#mainMenu ul {
position:absolute;
width:150px;
top:17px;
left:-9999px;
text-align:left;
background-color:#000;
z-index:5;
}
ul#mainMenu ul li {
display:block;
border-top:1px solid #999;
}
ul#mainMenu ul li:first-child {
border-top:none;
}
ul#mainMenu ul li a {
font-size:14px;
line-height:2em;
color:pink;
}
ul#mainMenu li:hover ul {
left:0px;
}
You should set the margin and padding to zero. IE has default value about this.
'ul#mainMenu ul {padding:0; margin: 0;}'
Make sure there is no margin between the elements which could be causing the issue. The IE dev tools will help with this.
Also, try applying a 1px transparent gif or png as the background of the child LI's - http://www.welovecss.com/showthread.php?s=4de6205bc9ac3ff2ead50464d123bcf4&t=6478&page=2
Hope it helps
Related
I have created a menu that is only visible on mobiles.
Using CSS I've managed to create a SHOW/HIDE NAVIGATION menu. You can see this in action at http://js.co.nz/mobile-test.php (currently only in portrait view on mobiles as that's as far as I've got with development).
I want to be able to show/hide the submenu items too (as the navigation menu is very long!). For example, if the user clicks on "Browse by type" I would like the submenu of: Chairs; Tables; Mirrors etc to appear.
The html currently looks like this:
<nav id="responsivenav" role="navigation">
Show navigation
Hide navigation
<ul>
<li>HOME</li>
<li>BROWSE ALL STOCK</li>
<li>BROWSE BY TYPE
<ul>
<li>Antique chairs</li>
<li>Dining tables</li>
<li>Antique mirrors<li>
</ul>
</li>
<li>BROWSE BY CATEGORY</li>
<li>BROWSE BY ROOM</li>
<li>REDUCED ITEMS</li>
<li>OPENING HOURS</li>
<li>NEWS</li>
<li>FIND US</li>
<li>ABOUT US</li>
<li>BROCHURES</li>
<li>PERIOD STYLES</li>
</ul>
<div class="clear"></div>
</nav>
The css looks like this:
#responsivenav {display:block;}
#responsivenav > a { }
#responsivenav:not( :target ) > a:first-of-type,
#responsivenav:target > a:last-of-type {
display: block;
height:50px;
line-height:50px;
font-size:15px;
margin-bottom:0;
padding:0;
text-indent:100px;
text-decoration:none;
color:#fff;
font-weight:bold;
text-transform:uppercase;
background: #393b3c url(../images/wd/mobile-menu-icon.jpg) no-repeat 40px center; }
/* first level */
#responsivenav > ul {
height: auto;
display: none;
border-bottom:5px solid #fff;}
#responsivenav:target > ul {
display: block;
list-style:none;
padding:0;
margin:0;}
#responsivenav > ul > li {
width: 100%;
float: none;
display:block;
height:60px;
line-height:60px;
font-size:15px;
text-indent:40px;
border-top: 1px solid #eee;}
#responsivenav > ul > li a {
text-decoration:none;
color:#393b3c;}
/* second level */
#responsivenav > ul > li > ul {
display: none;
}
#responsivenav > ul > li:hover > ul {
display:block;
}
It is this second level of the menu that I know I haven't got right. I've tried various ways of doing it e.g. adding classes to the submenus, using left:-9999px instead of display:none; etc but nothing seems to work yet.
Please help! I'm sure this should be so simple!
Just replace the property height: 60px to min-height: 60px of the #responsivenav > ul > li (line 138 in PhonePtest.css file).
Currently, your code makes the submenu appear on hover which in case of mobile works on click. That is why the navigation menu hides on click. To prevent this you can replace
BROWSE BY TYPE
with
BROWSE BY TYPE
You can do the same with the other menu elements.
How to click the navicon image in mobile phone (not hover) and it will show up a small container which has links. Here are my codings..
HTML
<div id="nav">
<ul class="menu">
<li> <a class="#"> LINK </a> </li>
<li> <a class="#"> LINK </a> </li>
<li> <a class="#"> LINK </a> </li>
<li> <a class="#"> LINK </a> </li>
</ul>
<img src="nav.png">
<div class="navimage">
<img src="twitter.png">
<img src="facebook.png">
</div>
</div>
CSS
#nav {
height:70px;
border-bottom:1px solid #FFF;
margin-bottom:20px;
padding:0;
max-width:95%;
margin:0 auto;
}
#nav-icon img {
display:none;
}
.menu {
float:left;
width:70%;
margin:0 auto;
}
.menu li {
display:inline;
}
.menu a {
padding:15px;
margin:15px 0;
display:inline-block;
text-align:center;
}
.menu a:hover {
color:#DEB887;
}
#nav a:hover {
text-decoration:none;
}
.navimage {
float:right;
margin:20px 0;
width:30%;
}
.navimage img {
width:30px;
height:30px;
margin:0 2px;
border-radius:50%;
-webkit-border-radius:50%;
-moz-border-radius:50%;
-ms-border-radius:50%;
-o-border-radius:50%;
float:right;
}
RESPONSIVE CSS
#media only screen and (min-width: 480px) and (max-width: 764px) {
#nav-icon img {display:inline-block;height:40px;margin-top:10px;margin-left:10px;cursor:pointer;}
#nav ul, #nav:active ul {
display:none;
position:absolute;
padding:15px;
background:#fff;
border: 3px solid #DEB887;
left:30px;
top:50px;
width:30%;
border-radius:0 0 3px 3px;
z-index:9999;
}
#nav:hover ul {display:block;}
#nav ul li a {width:100%;color:#000;padding:0;margin:10px 0;}
#nav ul li a:hover {color:#DEB887;}
}
Here is JSFIDDLE to check it out. The problem is I hover nav div everywhere and it shows menu. What I want is to click the navicon image and it will appear menu? Any ideas?
Thanks
You need a small bit of jQuery, which means including the library in your head and having a small piece of script in the head aswell.
First add this to the head:
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
That loads the latest version of jQuery for you.
Next you need to add the jQuery code in to make the nav work. Its a simple 3 line code that checks its been clicked and then toggles the display on and off.
<script type="text/javascript">
$(document).ready(function() {
$('#nav-icon').click(function() {
$('ul.menu').toggle();
});
});
</script>
As you can see, it finds the id nav-icon and when its been clicked, runs a function which toggles the visibility of the ul.menu.
jsFiddle Demo: http://jsfiddle.net/3w63B/2/
If you go on the mozilla developer network (link) or go to the jQuery API pages (link) you can pick up the basics pretty quick. It only starts getting difficult when you start getting jumping right into the deepend of what it can all do.
Hope this helps fella.
What do you think this line of code does?
#nav:hover ul {display:block;}
Everytime you hover the nav anywhere the submenu will appear.
Instead of CSS use javascript / jQuery to make it appear on click.
$("#nav-icon").on("click", function() {
$(".menu").css("display","block");
});
Although above code isn't exactly what you want, because the submenu will stay forever. This will help you finding a solution by yourself ;). Coding is doing.
I'm creating a menu bar with ul li tags and the links are to close together how do I get them to have a bigger space between links?
Give margin on li element ...
<nav>
<ul>
<li><span>Home</span></li>
<li><span>Gallery</span></li>
<li class="last"><span>Map</span></li>
</ul>
</nav>
<style>
li{
display:inline-block;
background:blue;
width:100px;
height:20px;
text-align:center;
margin-right:15px; /* edit this margin to separate your elements*/
}
a{
text-decoration:none;
color:black;
display:block;
}
.last {margin-right:0px;}
</style>
http://jsfiddle.net/Tv7pA/
you can remove margin right from last element like top or with jQuery or with css li:last-child, li:nth-child(3) ... but best way is with jQuery or with class coz it is sup. in all browsers
I have This Menu For Horizontal Menu. How To generate css for selected li or a.li.
HTML :
<ul class="arrowunderline">
<li>Home</li>
<li>New</li>
<li class="selected">Revised</li> <!-- IF a.LI selected <a class="selected" > END -->
<li>Tools</li>
<li>CSS</li>
<li>Forums</li>
</ul>
CSS:
ul.arrowunderline{
list-style-type:none;
margin:0;
padding:0;
text-align:center; /* enter "left", "right", or "center" to orient the menu accordingly */
font: bold 16px Georgia;
margin-top: 60px;
}
ul.arrowunderline li{
display:inline;
margin-right:25px; /* spacing between each menu item */
}
ul.arrowunderline li a{
position:relative;
color:black;
padding-bottom:8px; /*spacing between each menu item and arrow underline beneath it */
text-decoration:none;
}
ul.arrowunderline li a:hover:after{ /* use CSS generated content to add arrow to the menu */
content:'';
position:absolute;
left:50%;
margin-left:-75px;
margin-top: -60px;
width:150px;
height:40px;
background:url(http://i.stack.imgur.com/7jpU4.png) center bottom no-repeat;
}
UPDATE : Online Demo: http://jsfiddle.net/uc6Yz/2/
Might be you are looking for this:
//CSS
.selected{
background: red;
}
add this class to your <li> of respective page. let me explain if you are in home page add selected class to your <li class="selected"><a>Home</a></li> OR if you are in Forums page then add selected class to respective <li> like: <li class="selected"><a>Forums</a></li>
When you visit on home page the home menu get selected and when you visit on forum page forum menu get selected.
find here: http://jsfiddle.net/KkP7J/
You want that top border on permanent for selected right?
For this.
$('.arrowunderline li').on('click', function(){
$('.arrowunderline li').removeClass('selected');
$(this).addClass('selected');
});
are you looking for this?
ul.arrowunderline li.selected {
//place your code here (to modify list item)
}
ul.arrowunderline li.selected a {
//place your code here (to modify the "a" item when li is selected)
}
your question is a bit too dry, can you explain yourself al little bit more?
I am having a very basic problem in IE7 that I cannot seem to fix. If you look at this page: http://vitaminjdesign.com/IAM/company/ you will notice that the vertical nav (ul id="leftcol") is displaying incorrectly in IE7. Each word appears on its own line. Here is my HTML /. CSS:
<ul id="leftcol">
<li><a class="active" href="#">Company Overview</a></li>
<li>Why Choose Parker?</li>
<li>Testimonials</li>
<li>Financing Promotions</li>
<li>Licensing & Credentials</li>
</ul>
ul#leftcol{float:left; width:185px; position:relative; z-index:10;}
ul#leftcol li{float:right; clear:right; margin-bottom:14px; list-style:none; list-style-image:none; text-align:right; line-height:1.3; }
ul#leftcol li a{color:#505050; text-decoration:none; font-size:15px; float:right;}
ul#leftcol li a.active,ul#leftcol li a:hover{color:#89b060;}
Any ideas?
Remove clear:right; from the following
ul#leftcol li{float:right;margin-bottom:14px; list-style:none; list-style-image:none; text-align:right; line-height:1.3; }
try adding
ul#leftcol li a {
white-space: nowrap;
}
You could also give you li elements a fixed width.
Or maybe some display property as well like display: inline;