Subscribe

Subscribe by Email

 

This is a flexible HORIZONTAL HOVER menu that WORKS in IE 7 and Maxthon 2

… with NO Javascript Hacks. It is 100% W3C Compliant for XHTML STRICT and CSS.

More to the point – No Whatever:hover.htc Required NO SuckerFish or SuckerTree additions
NO [IF IE]…. Required Naturally, if you WANT to support the ancient browser technology then use the Java addons mentioned – but I thought everone was crying out to refuse supporting it anymore (talking about IE6 and older that doesnt recognise hover, onclick ..) On that note, the CSS side menu on the main site works on IE6 and displays it’s formatting correctly … that is for another post though.

I am hoping that this code will be of valuable use to a fellow ‘Webby’ out there. Isn’t it great when you get the thing looking JUST how you want it… and then a few days later, you check it is supposedly ‘bugs ironed out version’ Internet Explorer 7 and the world drops on your head.

Microsoft live in ‘opposite world’ …. because in opposite world when you say display inline / and say make my menu horizontal … you mean’t Vertical —- NOT!!!

And so, after a LOT of trials, tribulations, and pain from banging my head on the desk, I got this working and hope to save someone elses pain in the process.

So what about IE6 you ask.

IE6 just doesnt show the thing at all ) which suits me, in fact that’s GREAT! -It doesnt show any errors to your visitor… but it would be a good idea to give a bog alternate nav or PREFERABLY encourage anyone on IE6 / IE ancient based to come out of the dark ages, into the 21st Century – and UPGRADE!- preferably NOT to IE anything including anything based on it such as Maxthon. It has YET to be successfully described why some think IE6 is safter to use that other browser.

Checked and working “Okilidokily” IN:

Firefox 2, Google Chrome, Avant, Opera 9, Netscape Navigator 9, Flock 1.2. Tested on Firefox on Linux. Safari 3 on PC. It WORKS in – IE 7 and Maxthon 2 !!

The Code

Right then…. The XHTML code is as bog as bog can be with a simple UL / LI (Unordered List / List) Menu listing. The basic model is as follows:

XHTML

<div id=”topnav”>

<ul class=”nav”>

<li><a href=”#”>TITLE A</a>
<ul>
<li><a href=”/pagelink.php”>Subtitle 1</a></li>
<li><a href=”/pagelink.php”>Subtitle 2</a></li>
<li><a href=”/pagelink.php”>Subtitle 3</a></li>
<li><a href=”/pagelink.php”>Subtitle 4</a></li>
</ul>
</li>

<li><a href=”#”>TITLE B</a>
<ul>
<li><a href=”/pagelink.php”>Subtitle 1</a></li>
<li><a href=”/pagelink.php”>Subtitle 2</a></li>
<li><a href=”/pagelink.php”>Subtitle 3</a></li>
<li><a href=”/pagelink.php”>Subtitle 4</a></li>
</ul>
</li>
</ul>

Of course you can put links on the titles instead of ‘#’. The point is – it HAS to be a link – even if it is null (#)

Now for the CSS. First I have put in the absolute stripped down CSS ‘as is’ and the ACTUAL Symsys menu Style colours, sizes, paddings and margins. You will see that the result is quite unbloated, short and sweet.
After this, I will put the humongous annotated sheet so you know what does WHAT, and where to change to your custom style.

CSS – TRIMMED

#topnav {display:none;}
html>body #topnav {display:block;}
#topnav {position:absolute; margin-left:300px; margin-left:115px; top:159px; font-size:0; text-align:left;}
*—–Yes NEED margin in twice——*/
.nav li{display:inline;}
.nav li ul{padding-top:2px;}
ul.nav { margin-top:5px;}
ul.nav, .nav ul{margin:0; padding:0; cursor:default; list-style-type:none;}
ul.nav>li{display:table-cell; padding:1px; width:120px; float:left;}
ul.nav li>ul{display:none;}
ul.nav li:hover>ul{display:block;}
.nav ul li a{display:block; padding: 2px 4px 2px 4px;}
.nav li a {color:#fff; padding-left:4px;}
.nav ul li a{background-color:#EAEAEA; color:#000; width:112px; margin-top:1px;}
ul.nav li:hover {background-color:#28a3c5;}
.nav ul li a:hover{background-color:#fc0; color:#000;}
ul.nav li:active,
.nav ul li a:active{background-color:#44C21F; color:#FFF;}
.nav a{font:bold 12px Arial, Helvetica, sans-serif; text-decoration:none;}

Yes, that was IT. And now for the maybe excessively annotated version. I will apologise if some things are not too clear to you personally but hopefully you will find it easy to follow.

CSS – EXPLAINED

#topnav {display:none;}
html>body #topnav {display:block;}/*—– These 2 lines Hide from IE6 and older ALTOGETHER——*/

#topnav {
position:absolute;/*—–place exactly where I WANT it to appear——*/
margin-left:300px;
*—–usual IE Fix of following position:absolute with Position: relative will not work
Re-adjust the margin to correct IE Invented placement. Big headed MS will read the FIRST instance of a repeat element as THEIRS and ignore any repeat element afterwards…(sounds typically fitting for that company lol). All the other browsers that follow code convention properly will see the first, then see the second and update/use that instead——*/
margin-left: 115px;
top: 159px;
/*width:9999px;—makes no difference —-*/
font-size: 0; /*—–fix menu placement – all browsers unified——*/
text-align:left; /*—–If you want menu Items Centered then change it——*/
}

.nav li{
display:inline; /*no difference in all other browsers but REQUIRED for IE (7)*/
}

.nav li ul{
padding-top: 2px; /*padding at top (UNDER heading) of the entire submenus ONLY–*/
/* padding-bottom:5px; OPTINAL padding at bottom of the entire submenus ONLY – or use MARGIN – Does Not matter – get the SAME result in all browsers–*/
}

ul.nav { margin-top: 5px;}
/*display:table;—makes no difference inline, table, whatever—-*/
/*position:relative;—makes no difference —-*/

ul.nav,
.nav ul{
margin: 0;
padding: 0;
cursor: default;
list-style-type: none; /*—gets rid of horrid bullet points and associated indents—-*/
} /*display: inline;no difference in ANY browser–*/

ul.nav>li{
display: table-cell;/*—needs to be ‘TABLE-CELL’ or screws up ALL Menus – This ALSO hide the entire menu from ancient browsers (nice one) —-*/
/*display: inline;–screws up ALL Menus all do an IE and put subsequents AND Subs underneath–*/
/*position:relative;—makes no difference —-*/
padding: 1px ; /* This effectively puts 1px border extended around submenupopup – optional – make anything you want – will effect overall width of menu so may have to reduce widths unanimously to compensate—-*/
width:120px; /*Specified width of menu Tabs–*/
float:left; /*IE (7) ONLY diff – doesnt plonk subsequent and subs underneath on hover -*/
}

ul.nav li>ul{
display: none; /*obviously – don’t show submenu normally—-*/
/*position:relative;—makes no difference —-*/
}

ul.nav li:hover>ul{
display : block;/*obviously – show submenu only when the mouse is over it—*/
/*position:relative; Makes stuff all difference –*/
}

.nav ul li a{
display: block;
padding: 2px 4px 2px 4px;/*padding around submenu links order- top right bottom left (clockwise) */
/*border-top: 1px solid #000; optional entries – of course, my example has border extended aound it already making a bottom line*/
}

.nav li a { color:#000;/*** Menu Title color only!!!!! ***/
padding-left:4px;}/*** Left and right padding effective ONLY for menu titles here – probably best to match padding of submenu items as above***/
/* padding-top:9999px;}** this may appear to be a silly entry BUT in all browsers apart from IE (7) it creates an invisible hotspot extending in this case 9999px above the menu title TEXT width. Cool trick – handy if you want it – nuke it if you dont. Take it out of comment to try***/

.nav ul li a{
background-color: #EAEAEA;/*** bg col of entire submenu***/
color: #000;/*** text col of entire submenu***/
width: 112px;/*fixes sub width Firefox*/ /* width minus padding (both sides) of sub items to compensate eg if 4 – same width as header cell 120 – (2×4 left right padding)= 112—-*/
margin-top: 1px;} /*put this in IF you WANT a gop between each submenu item – the background of extended top item background will show behind***/

ul.nav li:hover {
background-color: #28a3c5;} /*** Only open menu header and matching extended border around who menu/submenu if opted for) ***/

.nav ul li a:hover{
background-color: #fc0;
color: #000; /*** text col and bg col of submenu individual li items on hover – mine are kept black – you can choose different***/
}

ul.nav li:active,
.nav ul li a:active{
background-color: #44C21F;/*** text col and bg col of submenu individual li items on Click / active***/
color: #FFF;
}/*** Browser differences – on click the title item will also change bg col including any visable background between menu item blocks. (not title txt col aswell) This is in Chrome Firefox Opera Netscape Flock- but not in IE – See notes for versions tested**Of course, you can always just remove ul.nav li:active,*/

.nav a{
font:bold 12px Arial, Helvetica, sans-serif;
text-decoration: none;
}

Further Comments

IE7 and Maxthon 2 – on load, it millisend hops to the right then puts it where it should – not really an issue just typically lame coding by Microsoft (Hey, I use XP Pro, have done for years and although it does get bogged down I am happy enough with it – I outright refuse to entertain vista or the upcoming Windows 7 though)

Minimal layout glitch on Opera 9 – all good – though does put a visable padding above the title items by about 2px – shoving it all down a tad ( and no, it is nothing to do with the 2px padding under the title header being applied. Let me know if you fix this “pwetty pweeeease”.

Learning CSS and VALID code…. The rule of thumb is, if youre not having any trouble in IE, then theres something wrong with your code – youre not doing it right–

Filed under: CSS,Code,XHTML ... Comments (2)

Tags: CSS, Horizontal, IE6, IE7, Menu, Valid Code
Subscribe in a Reader or  by Email