Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS WordPress – Menu images instead of text Re: WordPress – Menu images instead of text

#106257
cadesdaddy
Member

Not exactly background images, but to give a button effect, I styled as follows:

/* =Menu


*/

#access {
background: #000; /*


this colors the whole menu bar */
display: block;
float: left;
margin: 0 auto;
width: 940px;
}
#access .menu-header,
div.menu {
font-size: 13px;
margin-left: 12px;
width: 928px;
}
#access .menu-header ul,
div.menu ul {
list-style: none;
margin: 0;
}
#access .menu-header li,
div.menu li {
float: left;
position: relative;
}
/*


THIS SET DEFINES THE BLOCK WHEN NOT HOVERING */
#access a {
/* width : auto;


REMOVED */
/* height : auto;


REMOVED */
display : block;
border : 2px outset #545252;
text-decoration : none;
list-style:none;
background-color : #000;
color : #fff;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
padding : 3px 12px;
outline : 0;
cursor : pointer;
margin-left:0px;
/* color: #FFFFFF; — ORIGINAL */
/* display: block; — ORIGINAL */
/* line-height: 38px; — ORIGINAL */
/* padding: 0 10px; — ORIGINAL */
/* text-decoration: none; — ORIGINAL */
}
#access ul ul {
box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
-webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
display: none;
position: absolute;
top: 38px;
left: 0;
float: left;
width: 180px;
z-index: 99999;
}
#access ul ul li {
min-width: 180px;
}
#access ul ul ul {
left: 100%;
top: 0;
}
/*


DON’T KNOW WHAT THIS COLORS */
#access ul ul a {
background: #333; /*


DON’T KNOW WHAT THIS COLORS */
line-height: 1em; /*


ORIGINAL */
padding: 10px; /*


ORIGINAL */
width: 160px; /*


ORIGINAL */
height: auto; /*


ORIGINAL */
}
/*


THIS SET COLORS THE TEXT AND BACKGROUND OF THE MENU LINK BLOCK WHEN HOVERING */
#access li:hover > a,
#access ul ul :hover > a {
border : 2px outset #545252;
background-color : #fff;
color : #000;
text-decoration:underline;
/* background: #333; ORIGIONAL */
/* color: #fff; ORIGINAL */
}
#access ul li:hover > ul {
display: block;
}

/*


THIS SET COLORS THE TEXT OF THE MENU LINK ON THE ACTIVE PAGE */
#access ul li.current_page_item > a,
#access ul li.current-menu-ancestor > a,
#access ul li.current-menu-item > a,
#access ul li.current-menu-parent > a {
color: #fff;
font-weight:bold;
font-size:14px;
}
/*


THIS SET COLORS THE TEXT OF THE MENU LINK ON THE ACTIVE PAGE ALSO I THINK :) */
#access ul li.current_page_item > a:hover,
#access ul li.current-menu-ancestor > a:hover,
#access ul li.current-menu-item > a:hover,
#access ul li.current-menu-parent > a:hover {
color: #000;
font-weight:bold;
font-size:14px;
}
* html #access ul li.current_page_item a,
* html #access ul li.current-menu-ancestor a,
* html #access ul li.current-menu-item a,
* html #access ul li.current-menu-parent a,
* html #access ul li a:hover {
color: #fff; /*


I THINK THIS COLORS THE TEXT ON THE ACTIVE PAGE TOO, BUT NOT FOR SURE */

/*


i love cabbage, i really do, you should try it */
}