Global Navigation

header

Main Navigation

Sub-Navigation

Content

 

Fisheye Menu

I'll have to make time to write some stuff about the development of the Fisheye Menu here!

For the top level menu I used...

[!Fisheye!]

For the second level menu...

[!Fisheye? &Parent=`[[UltimateParent]]` &startSize=`24` &endSize=`48`
&menuDiv=`second_menu` &menuName=`second_fisheye_menu`!] 

The CSS for both menus...

/* Fish Eye Menu */
#menu {width:980px ; height:100px; margin: 0 auto; background:#FFFFFF;}
#fisheye_menu {list-style: none; padding: 20px 0px 0px 0px; margin: 0 0 0 40px;
position:absolute; z-index:2; width:970px ;}
#fisheye_menu li {position: relative; display: block; float: left; 
padding: 0px 7px 0px 7px; }
#fisheye_menu span {position: absolute; left: 10px; top: 128px; text-align: center;
width: 120px; padding: 5px; color: #fff;background: #F24F00;}
#fisheye_menu a {text-decoration: none;}
#fisheye_menu img {border: 0; vertical-align: top;}
#fisheye_menu img a{border:none; text-decoration:none; z-index:800}
/* Second Fish Eye Menu */
#second_menu {width:980px ; height:40px; margin: 0px auto; background:#FFFFFF;
border-top: solid 1px rgb(125,125,125);}
#second_fisheye_menu {list-style: none; padding: 10px 0px 0px 75px; margin: 0 auto;
position:absolute; z-index:1}
#second_fisheye_menu li {position: relative; display: block; float: left; 
padding: 0px 10px 0px 10px;}
#second_fisheye_menu span {position: absolute; left: 10px; font-size: 11px; 
text-align: center; color: #F24F00; top: 100%;}
#second_fisheye_menu a {text-decoration: none;}
#second_fisheye_menu img {border: 0; vertical-align: top;}
#second_fisheye_menu img a{border:none; text-decoration:none;}
modx

Footer