Sexy Drop Down menu

Subiect: Sexy Drop Down menu Mar Mar 22, 2011 3:23 pm

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(https://i.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(https://i.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(https://i.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(https://i.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(https://i.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 !