Tutorial-Vimeo Menu

Scris de Edge Sam Sept 17, 2011 7:53 am

Tutorial - Vimeo Menu

1. Adaugati codul CSS de mai jos in Foaia de stil CSS a forumului dumneavoastra.

Cod:: /* Vimeo Menu */ #menu{ margin:0px; padding:0px; list-style:none; color:#fff; line-height:45px; display:inline-block; float:left; z-index: 999; } #menu a { color:#fff; text-decoration:none; } #menu > li {background:#172322 none repeat scroll 0 0; cursor:pointer; float:left; position:relative; padding:0px 10px;} #menu > li a:hover {color:#B0D730;} #menu .logo {background:transparent none repeat scroll 0% 0%; padding:0px; background-color:Transparent;} /* Sub-Menus Vimeo*/ #menu ul { padding:0px; margin:0px; display:block; display:inline;} #menu li ul { position:absolute; left:-10px; top:0px; margin-top:45px; width:150px; line-height:15px; background-color:#172322; color:#0395CC; /* for IE */ display:none; } #menu li:hover ul { display:block;} #menu li ul li{ display:block; margin:5px 20px; padding: 5px 0px; border-top: dotted 1px #606060; list-style-type:none; } #menu li ul li:first-child { border-top: none; } #menu li ul li a { display:block; color:#0395CC; } #menu li ul li a:hover { color:#7FCDFE; } /* Main Submenu Vimeo */ #menu #main { left:0px; top:-20px; padding-top:20px; background-color:#7cb7e3; color:#fff; z-index: 999;} /* delete ce nu trebuie */ #i_icon_mini_index, #i_icon_mini_portal, #i_icon_mini_faq, #i_icon_mini_members, #i_icon_mini_groups, #i_icon_mini_profile, #i_icon_mini_gallery, #i_icon_mini_calendar {display: none !important;}

2. Copiati codul meniului de mai jos:

Cod:: <td valign="above" width="10%" align="right" height="10"><ul id="menu"> <li class="logo"> <img style="float: left;" alt="" src="http://i37.servimg.com/u/f37/15/27/05/12/menu_l11.png"> <ul id="main"><li>Bun venit pe Vimeo Menu! Best view with Mozilla Firefox</li></ul> </li> <li><a href="/forum.htm">Forum</a></li> <li><a href="/portal.htm">Portal</a></li> <li><a href="/profile.forum?mode=editprofile">Profil</a></li> <li><a href="/gallery/index.htm">Galerie</a></li> <li><a href="/calendar.forum">Calendar</a></li> <li><a href="/faq.htm">Faq</a></li> <li><a href="/memberlist.forum">Membri</a></li> <li><a href="/groupcp.forum">Grupuri</a></li> <li><a href="/contact.forum">Contact</a></li></ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <img style="float: left;" alt="Bun venit" src="http://i37.servimg.com/u/f37/15/27/05/12/menu_r11.png"> </td>

Puneti-l in template-ul overall_header ( Intrati in Panou de administrare > Afisare > Template-uri > General > overall_header_new ) dupa codul
<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">

***Inlocuiti Link 1..3 cu titlul dorit !
***Inlocuiti # cu Link-ul de redirectionare dupa ce dati click pe Link 1...3

- Pentru orice nelamurire legata de acest tutorial va rugam sa postati
in sectiunea [Trebuie sa fiti inscris si conectat pentru a vedea acest link]

Previzualizare : [Trebuie sa fiti inscris si conectat pentru a vedea acest link]

Tutorial realizat de ------ | DesignART

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