Tutorial - Simple Green Menu.

Scris de Vizitato Sam Apr 30, 2011 9:51 am

Tutorial - Simple Green Menu.

Instalare:

1. CSS
Adaugati codul urmator in CSS:

Cod:: * {margin: auto;padding: 0;} :focus{outline:none;} a img{border: 0px;} a {text-decoration: none;cursor:pointer;} .main_body {width:960px;color:#d4d7da;font-size:12px;margin-top:50px;} .menu_division{clear:both;padding-top:30px;} .menu_body1{float:left;width:948px;text-align:left;background:url(http://img218.imageshack.us/img218/2412/menubg4.gif) left repeat-x;height:38px;} .menu_left_part1{float:left;width:6px;height:38px;background:url(http://img651.imageshack.us/img651/2229/menuleftimg4.gif) no-repeat;} .menu_right_part1{float:right;width:6px;height:38px;background:url(http://img148.imageshack.us/img148/8387/menurightimg4.gif) no-repeat;} .menu_content1{padding:6px 5px 0px 5px;font-weight:bold;} .menu_content1 ul{list-style-type:none;} .menu_content1 li{float:left;margin-right:5px;} .menu_content1 li:hover{background:#ffffff;margin-right:5px;float:left;color:#2b2f32;} .menu_content1 a{color:#d4d7da;padding:5px 20px 5px 20px;display:block;} .menu_content1 a:hover{color:#2b2f32;padding:5px 20px 5px 20px;} li.menu_content1_active{background:#ffffff;margin-right:5px;float:left;color:#2b2f32;} .menu_content1_active a{color:#2b2f32;padding:5px 20px 5px 20px;} /* Search Part Starts Here */ .search_body1{margin-top:2px;color:#2b2f32;width:220px;height:20px;float:right;background:url(http://img511.imageshack.us/img511/540/searchinputbg4.gif) no-repeat;} .search_body1 a{padding:0px;display:inline-block;} .search_body1 a:hover{padding:0px;display:inline-block;} .search_body1 input[type="text"]{margin:1px 0px 0px 3px;width:180px;color:#2b2f32;background:none;border:none; vertical-align:top;} .search_body1 input[type="image"]{margin:1px 0px 0px 8px;} /* Search Part Ends Here */

2.HTML
Adaugati codul urmator in in template-ul overall_header dupa codul
Cod:
 Continutul codului. 

Cum ajungem la template-uri ?

Panou de administrare > Afisare > Template-uri > General > overall_header.

Cod Meniu

Cod:
<div class="main_body"> <div> <div class="menu_left_part1"></div> <div class="menu_body1"> <div class="menu_content1"> <ul> <li class="menu_content1_active"> <a href="[Trebuie sa fiti inscris si conectat pentru a vedea acest link] </li> <li> <a href="[Trebuie sa fiti inscris si conectat pentru a vedea acest link] </li> <li> <a href="[Trebuie sa fiti inscris si conectat pentru a vedea acest link] </li> <li> <a href="[Trebuie sa fiti inscris si conectat pentru a vedea acest link] </li> <li> <a href="[Trebuie sa fiti inscris si conectat pentru a vedea acest link] </li> <li> <a href="[Trebuie sa fiti inscris si conectat pentru a vedea acest link] </li> </ul> <div class="search_body1"> <input type="text" name="search" /><a href="[Trebuie sa fiti inscris si conectat pentru a vedea acest link] style="margin-top:1px;" type="image" src="http://img844.imageshack.us/img844/1585/searchbtnt.gif" name="Search" /></a> </div> </div> </div> </div> </div>

Tutorial realizat de Emanuel | DesignART

***Important !
Reproducerea si/sau copierea acestui tutorial NU este permisa fara acordul postatorului !