Motanel Tutorials


 
AcasaAcasa  RegulamentRegulament  FAQFAQ  CautareCautare  MembriMembri  InregistrareInregistrare  ConectareConectare  

Sexy Drop Down menu


Navigare :: HTML (HyperText Markup Language)
AutorMesaj
 Rylled
avatar
Rang: Fondator

Respetarea regulilor 100%

Vezi profilul utilizatorului
MesajSubiect: 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
avatar
Rang: Membru - MT™

Respetarea regulilor 75%

Vezi profilul utilizatorului
MesajSubiect: Re: Sexy Drop Down menu Joi 14 Apr 2011 - 7:20
1.Cum scot vechiul meniu?
 Rylled
avatar
Rang: Fondator

Respetarea regulilor 100%

Vezi profilul utilizatorului
MesajSubiect: Re: Sexy Drop Down menu Joi 14 Apr 2011 - 7:26
Pentru asta exista sectiune de suport. ;)

PS: S-a rezolvat cu redirectionarile.
 Ada
avatar
Rang: Membru - MT™

Respetarea regulilor 75%

Vezi profilul utilizatorului
MesajSubiect: 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!
 Vizitato
avatar
Rang: Vizitator


MesajSubiect: 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 ?
 Justin
avatar
Rang: Membru - MT™

Respetarea regulilor 75%

Vezi profilul utilizatorului
MesajSubiect: 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:


MesajSubiect: Re: Sexy Drop Down menu



Copyright © 2013 - Toate drepturile rezervate
Design creat si codat de Alexandru Miron si Stefan Patrascu