Mon, 2016-02-08 04:42
I need help duplicating a menu that looks like manila folder tabs. I have it very close but can't get if good enough. Please advise. I am a novice at css.
My site
http://area-10.97048.info
Site I wish to emulate
http://area1.handbellmusicians.org
Sun, 2016-02-14 22:35
#1
css
I made a little progress with my menu project but need help completing. I have added the css below.
[/*--------- Menu style ----------*/
#standardMenu { margin:0;position:relative; z-index:903;font-weight:normal}
#standardMenu ul {margin:0; padding: 0px 0px 0px 0px;}
#standardMenu ul li {list-style:none;float:right;background:none;overflow:visible;position:relative;cursor:pointer;height:25px;line-height:25px; background:#e3dfb5;}
#standardMenu ul li a{display:block; background:url(http://area-10.97048.info/portals/39/2016/Menu/tab6a.jpg) no-repeat right top;text-decoration:none;}
#standardMenu ul li.last a{background:url(http://area-10.97048.info/portals/39/2016/tab8.jpg)}
#standardMenu ul li a:hover { text-decoration:none; }
#standardMenu ul li a span{display:block;margin-right:0px; margin-left:30px; padding:0 0px;text-transform:uppercase;font-size:11px;font-weight:normal;text-decoration:none;color:#bd7328;}
#standardMenu ul li.selected a span, #standardMenu ul li.breadcrumb a span, #standardMenu ul li a:hover span{ text-decoration:none;color:#bd7328; background:url(http://area-10.97048.info/portals/39/2016/tab2.jpg) repeat-x top;}
#standardMenu ul li ul li{ background:#f2f2f2;background: -webkit-gradient(linear, left top, left bottom, from(#e3dfb5), to(#e3dfb5)); background: -moz-linear-gradient(top, #F5F5F5, #E1E1E1); margin:0px;white-space:normal; height:auto; line-height:1.5em; width:180px; border-top:1px #BBBDD3 solid;}
#standardMenu ul li ul li.first{ border-top:none; }
#standardMenu ul li ul li a {display:block;background:none;text-decoration:none;font-weight:normal;text-transform:none;padding:5px 15px 7px 12px;text-transform:uppercase; font-size:11px;color:#bd7328;}
#standardMenu ul li ul li.selected > a, #standardMenu ul li ul li.breadcrumb > a, #standardMenu ul li ul li.item a:hover{ background:#e3dfb5; color:#bd7328; cursor:pointer; }
#standardMenu ul li ul li.haschild > a{ background:url(../images/menu-arrow01.gif) no-repeat right center; }
#standardMenu ul li ul li.selected.haschild > a, #standardMenu ul li ul li.breadcrumb.haschild > a, #standardMenu ul li ul li.item.haschild > a:hover { background:url(../images/menu-arrow02.gif) no-repeat right center #e3dfb5; }
#standardMenu ul li ul { display:none; position:absolute;left:0;top:25px;border:solid 2px red;}
#standardMenu ul li:hover ul.level0 { display: block;}
#standardMenu ul li ul li ul{ display:none; }
#standardMenu ul li ul li:hover ul.level1{ display: block;left:180px; top:-1px}
#standardMenu ul li ul li ul li ul{ display:none;}
#standardMenu ul li ul li ul li:hover ul.level2 { display: block;left:180px; top:-1px}
#standardMenu ul li ul li ul li ul li ul{ display:none;}
#standardMenu ul li ul li ul li ul li:hover ul.level3 { display: block; left:180px; top:-1px}
#standardMenu img.mmIcon {max-height:24px; margin-right: 7px; vertical-align: middle;}
#standardMenu img.rootIcon {max-height:30px; margin-right: 6px; vertical-align: middle;}
]
Tue, 2016-02-16 04:25
#2
simplified code
I simplified the code and works nicely but the Home Tab need to have a different url and I am not able to figure that out
[
ul {
list-style-type: none;
margin: 0;
padding: 1px 0px 0px 0px;
overflow: hidden;
border: 0;
background-color: #1b3743;
}
li {
float: right;
}
li a {
display: block;
color: #bd7328;
background: url(http://area-10.97048.info/portals/39/2016/Menu/Tabs.jpg);
text-align: center;
padding: 4px 4px 4px 22px;
text-decoration: none;
}
/*- Home tab url (http://area-10.97048.info/portals/39/2016/Menu/HomeTab.jpg) -*/
li a.active {
color: red;
text-decoration:underline;
}