Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Page & Category Menu Bars (http://forum.bytesforall.com/forumdisplay.php?f=10)
-   -   working page menu bar with background image, image on hover, transparent link state (http://forum.bytesforall.com/showthread.php?t=15829)

cway Nov 1, 2011 03:39 PM

working page menu bar with background image, image on hover, transparent link state
 
I don't know if this would help anybody or not but I thought I would post a Page menu that seems to be working for me. I have a background image behind the entire menu. When you mouse-over a link, an image is loaded. When you're on a page, that page's link also has a background image. When you're not over a link, the link is transparent.

This menu is working on http://www.tribu2.com/ as of November 1, 2011.

I do not know css very well, so I don't know if this coding needs work or could be improved.

Code:

ul.rMenu {
        padding:0 !important;
        margin:0 !important;
        list-style:none !important;
        border:0 !important;
}
ul.rMenu li {
        margin:0 !important;
        padding:0px 0px 0 0 !important;
        border:0 !important;
}
ul.rMenu li a {
        margin:0 !important;
        padding: 14px 12px !important;
        color:#333 !important;
        font:normal 14px Arial, Helvetica, sans-serif !important;
        text-decoration:none !important;
        border: solid 0px #FFFFFF;
}

div#menu1 ul.rMenu li {
    background-color: transparent;
}
div#menu1 ul.rMenu {
    background-color: transparent;
}
div#menu1 ul.rMenu li:hover > a,
        ul.rMenu li a:hover {
        color:#000 !important;
        border: solid 0px #FFFFFF;
        background-image: URL(http://www.tribu2.com/images/navbar-background.gif) !important;
}
ul.rMenu li.current_page_item a {
        color: #000 !important;
        background-image: URL(http://www.tribu2.com/images/navbar-background.gif) !important;

}

#menu1 {
        width: 990px !important;
        margin: 0px;
}

div#menu1 {
        border-top: 0px solid #513154;
        border-bottom: 0px solid #513154;
        border-right: 0px solid #513154;
        border-left: 0px solid #513154;
        background-image: URL(http://www.tribu2.com/images/navbar-background2.gif) !important;
}


lmilesw Nov 1, 2011 04:06 PM

Very nice... The only coding things I see are that you probably don't need.
border: solid 0px #FFFFFF; or border:0 !important;
Instead if you want no borders use border: none; or perhaps border: none !important;


All times are GMT -6. The time now is 08:11 PM.

Powered by vBulletin® Copyright ©2000 - 2022, Jelsoft Enterprises Ltd.