| Subiect: Sexy Drop Down menu Mar 18 Mai 2010 - 2:02 | |
| Sexy Drop Down Menu | | Acest mic tutorial este facut special pentru forumurile facute pe forumgratuit.ro. Multi dintre voi ati incercat sa puneti acest meniu css pe forum si multi ati dat-o in bara. Asa ca am facut acest tutorial care sper sa va ajute. scripturile si imaginile sunt direct uploadate iar tutorilul e numai pentru versiunile de forum Punbb si Phpbb2. Am adaugat meniului un cod pentru a fi vizibile colturile rotunde de la sub-nav-uri si pe browserul Opera si am mai adaugat si umbra la chenarul ce afiseaza sub-nav-urile. Daca doriti sa nu o dati iar in bara cu postarea meniului pe forum, urmati cu atentie pasi de mai jos. | 1. Adaugati codul CSS de mai jos in foaia de stil CSS a forumului dumneavoastra.Panou de administrare > Afisare > Imagini si culori > Culori > Foaie de stil CSS /*----------------Drop Down Menu----------------*/ html, body { margin: 0; padding: 0; font: 10px normal Arial, Helvetica, sans-serif; } ul.topnav { list-style: none; padding: 0 20px; margin: 0; float: left; width: 1000px; background: #222; font-size: 1.2em; background: url(http://i65.servimg.com/u/f65/14/45/99/41/topnav10.gif) repeat-x; } ul.topnav li { float: left; margin: 0; padding: 0 15px 0 0; position: relative; /*--Declare X and Y axis base--*/ } ul.topnav li a{ padding: 10px 5px; color: #fff; display: block; text-decoration: none; float: left; } ul.topnav li a:hover{ background: url(http://i65.servimg.com/u/f65/14/45/99/41/topnav11.gif) no-repeat center top; } ul.topnav li span { width: 17px; height: 35px; float: left; background: url(http://i65.servimg.com/u/f65/14/45/99/41/subnav10.gif) no-repeat center top; } ul.topnav li span.subhover {background-position: center bottom; cursor: pointer;} ul.topnav li ul.subnav { list-style: none; position: absolute; left: 0; top: 35px; background: #333; margin: 0; padding: 0; display: none; float: left; width: 170px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; -moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-left-radius: 5px; -webkit-border-bottom-right-radius: 5px; border: 1px solid #111; box-shadow: 0px 2px 4px #606060; -webkit-box-shadow: 0px 2px 4px #606060; -moz-box-shadow: 0px 2px 4px #606060; } ul.topnav li ul.subnav li{ margin: 0; padding: 0; border-top: 1px solid #252525; border-bottom: 1px solid #444; clear: both; width: 170px; } html ul.topnav li ul.subnav li a { float: left; width: 145px; background: #333 url(http://i65.servimg.com/u/f65/14/45/99/41/dropdo10.gif) no-repeat 10px center; padding-left: 20px; } html ul.topnav li ul.subnav li a:hover { /*--Hover effect for subnav links--*/ background: #222 url(http://i65.servimg.com/u/f65/14/45/99/41/dropdo10.gif) no-repeat 10px center; } | 2. Copiati meniul de mai jos, si puneti-l in template-ul 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}">Exemplu: Vezi Imagine (click). Ce-i incadrat cu rosu este codul de mai sus, cei cu albastru este meniul de mai jos, asa trebuie pus. Unde scrie Continutul dorit in cod-ul de mai jos, puneti bannerul sau orice altceva doriti. Template-ul il gasiti in:Panou de administrare > Afisare > Template-uri > General > overall_header_new - Cod:
<script type="text/javascript" src="http://andreitm.bravehost.com/Sexy_drop_menu/jquery-latest.js"></script> <script type="text/javascript" src="http://andreitm.bravehost.com/Sexy_drop_menu/function.js"></script> <table border="0" cellspacing="0" cellpadding="0" align="center" width="100%" height="155" style="background-image:url('http://i65.servimg.com/u/f65/14/45/99/41/body_b10.gif');background-repeat: repeat-x;"> <tr> <td align="left" valign="middle" width="100%" height="120">Continutul dorit</td> </tr> <tr> <td align="left" valign="middle" width="100%" height="35" style="padding-left: 25px;"> <ul class="topnav"> <li><a href="#">Link 1</a></li> <li> <a href="#">Link 2</a> <ul class="subnav"> <li><a href="#">SubNav Link 1</a></li> <li><a href="#">SubNav Link 2</a></li> <li><a href="#">SubNav Link 3</a></li> <li><a href="#">SubNav Link 4</a></li> <li><a href="#">SubNav Link 5</a></li>
</ul> </li> <li> <a href="#">Link 3</a> <ul class="subnav"> <li><a href="#">SubNav Link 1</a></li> <li><a href="#">SubNav Link 2</a></li> <li><a href="#">SubNav Link 3</a></li> <li><a href="#">SubNav Link 4</a></li> <li><a href="#">SubNav Link 5</a></li>
</ul> </li> <li><a href="#">Link 4</a></li> <li><a href="#">Link 5</a></li> <li><a href="#">Link 6</a></li> <li><a href="#">link 7</a></li> </ul> </td> </tr> </table> Puteti adauga sau scoate link-uri dupa propriile preferinte ! |
|
Ada Rang: Membru - MT™

|
| Subiect: Re: Sexy Drop Down menu Joi 14 Apr 2011 - 7:20 | |
| 1.Cum scot vechiul meniu? |
|
| Subiect: Re: Sexy Drop Down menu Joi 14 Apr 2011 - 7:26 | |
| Pentru asta exista sectiune de suport.  PS: S-a rezolvat cu redirectionarile. |
|
Ada Rang: Membru - MT™

|
| Subiect: Re: Sexy Drop Down menu Joi 14 Apr 2011 - 7:39 | |
| P.S.deci e un alt cod sau e acelasi? e foarte frumos codul! |
|
| Subiect: Re: Sexy Drop Down menu Vin 29 Apr 2011 - 22:12 | |
| Meniul se afla pe google. Ce ati schimbat la el da aveti dreptul sa il postati pe MT? Aprobare ? |
|
| Subiect: Re: Sexy Drop Down menu Sam 30 Apr 2011 - 3:00 | |
| Nu se afla pe Google, se afla e un site pe care probabil l-ai gasit pe google
Imi poti arata unde scrie ca nu ai voie sa il postezi in alta parte? |
|
Continut sponsorizat Rang:
|
| Subiect: Re: Sexy Drop Down menu  | |
|