PDA

View Full Version : tab-image and drop down css, is it possible?



Quarkie
11-05-2008, 03:45 AM
1) Script Title: glossy or chrome style and suckertree

2) Script URL (on DD):
http://www.dynamicdrive.com/style/csslibrary/item/glossy_horizontal_menu/
http://www.dynamicdrive.com/dynamicindex1/chrome/index.htm
http://www.dynamicdrive.com/style/csslibrary/item/suckertree-menu-horizontal/

3) Describe problem: Is it possible to have a CSS/JS navigation bar with tab (images) and a drop down menu? I do not see one here. I see navigation bars with either images or dropdown functions.

I am trying to create a tabbed navigation bar - similar to the glossy tabs with the function of the drop down suckertree.

I have tried manipulating the css code, but so far with no luck - so I was just hoping to find out if anyone else has accomplished this feat.

Thank you and Peace

Quarkie
11-07-2008, 02:47 AM
Updating this post with the html and css from a test page I am working on.
Trying to get these tabs to work with this drop down.
Would love to be able to make the tab active on the applicable page.
Any one have any ideas on what I need to do to make this work?
Thanks!

http://www.liseyinc.com/IBG-08h.html

CSS

#navcontainertop {
margin-left: 0px;
width: 100%;
margin-bottom: 6px;
display: block;
height: 28px;
background-repeat: repeat-x;
background-color: #3A8B3C;
background-image: url(/images/images08/menub_bg.gif);
padding-top: 6px;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #3A8B3C;
}

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.suckertreemenu ul{
margin: 0;
list-style-type: none;
width: 100%;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #2B832D;
padding-top: 1px;
padding-right: 2px;
padding-bottom: 1px;
padding-left: 2px;
text-transform: capitalize;
font-variant: small-caps;
font-weight: bold;
}

/*Top level list items*/
.suckertreemenu ul li{
position: relative;
display: inline;
float: left;
padding-right: 9px;
padding-left: 9px;
}

/*Top level menu link items style*/
.suckertreemenu ul li a{
display: block;
border: #ffffff;
border-left-width: 0px;
text-decoration: none;
color: #2B8430;
padding-top: 2px;
padding-right: 10px;
padding-bottom: 3px;
padding-left: 3px;
}

/*1st sub level menu*/
.suckertreemenu ul li ul{
left: 0;
position: absolute;
top: 1em; /* no need to change, as true value set by script */
display: block;
visibility: hidden;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.suckertreemenu ul li ul li{
display: list-item;
float: none;
}

/*All subsequent sub menu levels offset after 1st level sub menu */
.suckertreemenu ul li ul li ul{
left: 159px; /* no need to change, as true value set by script */
top: 0;
}

/* Sub level menu links style */
.suckertreemenu ul li ul li a{
display: block;
width: 160px; /*width of sub menu levels*/
color: #666666;
background-color: #E0DFDF;
text-decoration: none;
padding: 1px 3px;
border-right-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #3A8B3C;
border-left-color: #3A8B3C;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #3A8B3C;
}

.suckertreemenu ul li a:hover{
color: #FFFFFF;
background-image: url(/images/images08/ibg-tab.gif);
background-repeat: no-repeat;
}

.suckertreemenu ul li ul li a:hover{
color: #FFFFFF;
background-color: #3A8B3C;
}

/*Background image for top level menu list links */
.suckertreemenu .mainfoldericon{
}

/*Background image for subsequent level menu list links */
.suckertreemenu .subfoldericon{
}

* html p#iepara{ /*For a paragraph (if any) that immediately follows suckertree menu, add 1em top spacing between the two in IE*/
padding-top: 1em;
}

#navcontainertop .suckertreemenu ul {
z-index: 5000;
}

/* Holly Hack for IE \*/
* html .suckertreemenu ul li { float: left; height: 1%; }
* html .suckertreemenu ul li a { height: 1%; }
/* End */


HTML

<div id="navcontainertop">
<div class="suckertreemenu">
<ul id="treemenu1">
<li><a href="#" style="border-left: #7f5342">&nbsp;&nbsp;IBGnet.com</a></li>
<li><a href="#">&nbsp;&nbsp;Products</a>
<ul>
<li><a href="#">Solutions</a></li>
<li><a href="#">Third Party Solutions</a></li>
<li><a href="#">Hosted Solutions</a></li>
<li><a href="#">Business Forms</a></li>
<li><a href="#">Support</a></li>
</ul>
</li>
<li><a href="#">&nbsp;&nbsp;Industries</a>
<ul>
<li><a href="#">Manufacturing</a></li>
<li><a href="#">Distribution</a></li>
<li><a href="#">Construction</a></li>
<li><a href="#">Healthcare Financials</a></li>
</ul>
</li>
<li><a href="#">&nbsp;&nbsp;Training </a>
<ul>
<li><a href="#">Courses</a></li>
<li><a href="#">Partner Only Training</a></li>
<li><a href="#">Cancellations</a></li>
</ul></li>
<li><a href="#">&nbsp;&nbsp;About IBG</a>
<ul>
<li><a href="#">Awards</a></li>
<li><a href="#">Microsoft Gold Certification</a></li>
<li><a href="#">Customer Testimonials</a></li>
</ul></li>
<li><a href="#">&nbsp;&nbsp;Consultants</a>
<ul><li><a href="#" class="contact">Blogs</a></li></ul></li>
<li><a href="#" class="contact">&nbsp;&nbsp;Contact Us</a>
<ul>
<li><a href="#">Contact Information</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">Informacion en Espa&ntilde;ol</a></li>
<li><a href="#">Directions</a></li>
</ul></li>
</ul>
</div>
</div>