Wordpress Menu

[raymond25]

Salut . Am un blog ( wordpress ) care are un meniu simplu orizontal.

Vreau sa adaug la fiecare link din meniu 3 imagini in background. Una normala , una on mouse over si alta la link accesat .

Astea sunt butoanele care vreau sa le adaug.

Asta-i codul css care banuiesc trebuie modificat :

/*******************
*	MENU		   *
********************/
#menu {
	background: #fff;
	height: 28px;
	margin: 0;
	padding: 0;
	border-top: 1px solid #f0f0f0;
	border-bottom: 3px solid #CECEF6;
}

#menu ul {
	float: left;
	list-style: none;
	margin: 0 0 0 1px;
	padding: 0;
}

#menu li {
	float: left;
	list-style: none;
	margin: 0;
	padding: 0;
	border-right: 1px solid #ddd;
}

#menu ul li {
	margin: 0 0 0 -1px;
	padding: 0;
	list-style: none;
	border-right: 1px solid #045;
}

#menu li a, #menu li a:link, #menu li a:visited {
	margin: 0;
	padding: 8px 12px 7px 12px;
	color: #000;
	display: block;
	font-size: 13px;
}

#menu li a:hover, #menu li a:active {
	background: #CECEF6;
	margin: 0;
	padding: 8px 12px 7px 12px;
	color: #fff;
	display: block;
	text-decoration: none;
	border-bottom: none;
}

#menu li li a, #menu li li a:link, #menu li li a:visited {
	background: #fff;
	width: 130px;
	float: none;
	margin: 0;
	padding: 8px 12px 7px 12px;
	color: #000;
	border-bottom: 1px solid #ddd;
	border-left: 1px solid #ddd;
	border-right: 1px solid #ddd;
}

#menu li li a:hover, #menu li li a:active {
	background: #CECEF6;
	color: #fff;
	padding: 8px 12px 7px 12px;
}

#menu li ul {
	z-index: 9999;
	position: absolute;
	height: auto;
	width: 155px;
	margin: 0;
	padding: 0;
	left: -999em;
}

#menu li li {
	border: none;
}

#menu li ul a {
	width: 120px;
}

#menu li ul a:hover, #menu li ul a:active {
}

#menu li ul ul {
	margin: -29px 0 0 156px;
	border: none;
}

#menu li:hover ul ul, #menu li:hover ul ul ul, #menu li.sfhover ul ul, #menu li.sfhover ul ul ul {
	left: -999em;
}

#menu li:hover ul, #menu li li:hover ul, #menu li li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul, #menu li li li.sfhover ul {
	left: auto;
}

#menu li:hover, #menu li.sfhover {
	position: static;
}

Ma poate ajuta cineva ??

Multumesc

[sosetutza]

Ai putea incerca dreamweaver....

[alinn]

Tu ai un meniu pop-down?

[cigraphics]

daca vrei sa folosesti o singura imagine care sa contina cele 3 butoane foloseste metoda css sprites

[abcxyz]

Seamana a "drop-down menu". Dar daca vrei o cale mai usoara, iti recomand alta cale. Inainte de toate, trebuie sa ai doua imagini: una pentru instanta normala si una pentru mouse over.

Spre exemplu am pozele 1,2, iar in cod (xhtml)

 <a href="http://google.ro" target="_blank"><div id="home"></div></a>

Noi ne vom juca cu div "home" dandu-i ca imagini de background imaginea dorita. Adica in cod CSS:

#poza {
height:--px; width:--px;
background-image:
url('1');background-repeat:no-repeat;}
#poza:hover
{
height:--px; width:--px;
background-image:
url('2');background-repeat:no-repeat;}

Atributele height si width trebuie completate cu marimea butonului, altfel vei avea surpriza ca ori e prea mare respectivul element (in caz ca vrei sa scrii text in interior) ori nu va aparea deloc.

Pentru mai multe detalii, iti recomand sectiunea CSS Pseudo-Classes from W3Schools.com

Edited June 6, 2010 by abcxyz