Mesaj # 1 | 1:42 PM 21/03/2013
Mai intai de toate, pentru a nu strica stilurile altor elemente sau mniuri de pe site, in stiluri trebuie de adaugat atributul #id.
Cod
#uMenuDiv1 .class {styles}

unde e 1 e ID-ul meniului pe care-l modificati.

Culoarea link-ului se schimba cu classa:
Cod
.u-menu a:link,.u-menu a:visited,.u-menu a:active {color:red;font-size:10pt;text-decoration:none;}


La selectia link-ului
Cod
.u-menu a:hover {color:red;font-size:11pt;text-decoration:none;}


class pentru streluta drop menu
Cod
.u-menuarrow {background:transparent url(/.s/img/wd/3/ar1.gif) no-repeat scroll 5px 8px;height:16px;width:16px;position:absolute;right:0;top:0}


In urmatoarea imagine va voi prezenta clasele pentru sub meniuri.

Stilizarea unui sub meniu e in felul urmator: (cliack pentru a mari)


Exemplu de sub meniu stilizat.
Cod
#uMenuDiv1 .u-menuvitem {margin:1px;background:#f7d6e9;}             
#uMenuDiv1 .xw-tl {background:#FFF1F9;}             
#uMenuDiv1 .xw-tc {background:#FFF1F9;}             
#uMenuDiv1 .xw-tr {background:#FFF1F9;}             
#uMenuDiv1 .xw-ml {background:#FFF1F9;}             
#uMenuDiv1 .xw-mc {background:#FFF1F9;border-right:1px solid #ffc3cf;border-bottom:1px solid #ffc3cf;border-top:1px solid #fff3f5;border-left:1px solid #fff3f5;}             
#uMenuDiv1 .xw-mr {background:#FFF1F9;}             
#uMenuDiv1 .xw-bl {background:#FFF1F9;}             
#uMenuDiv1 .xw-bc {background:#FFF1F9;}             
#uMenuDiv1 .xw-br {background:#FFF1F9;}             
#uMenuDiv1 .u-menuitemhl {margin:1px;background:#f7d6e9;}


Exempluri de site-uri cu meniuri schimbate:
http://destination.ucoz.org/
http://movietheater.ucoz.net/
http://desktopchaos.ucoz.ro/

Pe site-ul http://brochure-melbou.ucoz.com/ sunt stilizate 2 meniuri cu sub meniurile sale, atat cel vetical cat si cel orizontal. Pentru meniul orizontal sa folosit #uMenuDiv2

Cod
#uMenuDiv2 .xw-tl,#uMenuDiv2 .xw-bl,#uMenuDiv2 .u-menuvsep {display:none;}
#uMenuDiv2 .xw-ml,#uMenuDiv2 .xw-mr {margin:0;padding:0;border: 0px;}
#uMenuDiv2 .xw-mc {color:#5f431e; font-weight:bold; float: none; margin: 0px; padding: 0px;border: 0px;
}
#uMenuDiv2 .u-menubody {border: 0px;}
#uMenuDiv2 .u-menuvitem {background: #F5DA8D; padding: 0px; line-height:42px;color: #A27040;}
#uMenuDiv2 .u-menuvitem .uMenuItem {padding: 0 25px 0 5px;border: 1px solid #fff;}
#uMenuDiv2 a {text-decoration: none; }
#uMenuDiv2 a:hover {text-decoration: none;}

#uMenuDiv2 .u-menuitemhl {background:#F5DA8D; !important; padding: 0px; line-height:42px;}
#uMenuDiv2 .u-menuitemhl span {color: #fff; font-weight:bold;}
#uMenuDiv2 .u-menuarrow {background:transparent url('/img/bg_sb_arrow3.png') no-repeat scroll 5px 19px !important;height:26px;width:26px;position:absolute;right:0;top:0}

#uMenuDiv2 {
             position:relative;
             font-size: 11px;
             font-family:Verdana, Arial, Helvetica, sans-serif;
             font-weight: bold;
             margin-left:5px;
}

#uMenuDiv2 li a {
             display: block;
             height:27px; /*45*/
             line-height:14px; /*set for IE7*/
             color: #A27040;
             padding:18px 0px 0px 45px;
             margin:0;
             text-decoration:none;
             background:url(/img/icon_menu.png) no-repeat -5px 0px;
}

#uMenuDiv2 li a:hover,#menu > li.current_page_item > a{
             color:#ffffff;
             background:url(/img/icon_menu_hover.png) no-repeat -5px 0px;
}
Atașamente: 4818562.png (41.5 Kb)