Top subiecte apreciate

Optiuni experimentale
  • Foloseste AJAX in formulare ori de cate ori este posibil

Navigare rapidă

Ultimele subiecte
» Wireless ipb theme [punBB]
Scris de DenisPasca Mier 7 Dec - 23:51
» [Animate] Recent Topic IPB
Scris de DenisPasca Lun 5 Dec - 22:44
» Ipb Counter-strike Special FG
Scris de DenisPasca Sam 3 Dec - 22:52
» Special Theme Extrem Tutorials
Scris de cosminelu21 Vin 2 Dec - 23:48
Cuvinte-cheie

reclama  tutorial  edit  ultimele  meniu  avatar  subiecte  Mesaje  Statistici  navigare  subforumuri  punbb  tema  menu  banner  phpBB2  profil  legenda  drop  chenar  html  cautare  radio  animate  Bara  Metin2  

Tutorial - Simple Drop Down

Vizitato
Vizitator
Tutorial - Simple Drop Down la data de Vin 6 Apr - 12:58

Descriere:
Meniu simplu....

Demonstratie:

Demonstratie Click Aici


Instalare:

1. CSS
Adaugati codul urmator in CSS:
Panou de administrare > Afisare > Imagini si culori > Culori > Foaie de stil CSS


Cod:
a, a:visited {
   color: #464530;
   text-decoration: none;
}

label {
   font-size: 20px;
}

#content {
   display: block;
   width: 800px;
   margin-right: auto;
   margin-left: auto;
   text-align: center;
}

.drop-menu {
   display: block;
   margin-right: auto;
   margin-left: auto;
   text-align: left;
   padding: 10px 10px;
   font-size: 22px;
   height: 25px;
   max-height: 25px;
   width: 400px;
   background: #fff;
   cursor: pointer;
   border: 1px solid #f6f0e4;
}

   .plus {
      display: inline-block;
      -webkit-transition: .3s ease-in-out;
        -moz-transition: .3s ease-in-out;
        -o-transition: .3s ease-in-out;
   }

   .drop-menu:hover {
      border: 1px solid #fff;
   }

   .drop-menu:hover .sub-menu {
      display: inline-block;
   }

   .drop-menu:hover .plus {
      -webkit-transform: rotate(45deg);
      -moz-transform: rotate(45deg);
      -o-transform: rotate(45deg);
   }

   .sub-menu {
      display: none;
      width: 400px;
      background: #fff;
      padding: 10px 10px;
      margin-left: -11px;
      margin-top: 10px;
      border: 1px solid #fff;
      -webkit-box-shadow: 0px 13px 25px rgba(0,0,0, 0.2);
      -moz-box-shadow: 0px 13px 25px rgba(0,0,0, 0.2);
      box-shadow: 0px 13px 25px rgba(0,0,0, 0.2);
   }

   .sub-menu li {
      list-style-type: none;
      display: block;
      border-bottom: 1px dotted #eaeaea;
      font-size: 19px;
      height: 22px;
      padding: 8px 0;
   }

      .sub-menu li img {
         margin-right: .5em;
      }

   .sub-menu li:hover {
      border-bottom: 1px dotted #bababa;
   }





[/hide]
2. HTML
Codul il puteti adauga ori unde doriti dumneavoastra pe forumul vostru.
Cod:
<div class="drop-menu">
<span class="plus">+</span>Deschide Meniul
<ul class="sub-menu">
<li>
<a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</ul>


Tutorial realizat de Emanuel

Membru premium
Membru premium
Mesaje : 459
Sex : masculin
0 avertismente
Vezi profilul utilizatorului
Re: Tutorial - Simple Drop Down la data de Vin 6 Apr - 13:01

Bravo Edge,pot transfera si eu tutoriale?





[Doar moderatorii au dreptul sa vada aceasta imagine]
Dacă aveţi o problemă , nelămurire vă invit să mă contactaţi prin Mesageria Privată , totuşi nu cereţi support prin mesageria privată.
Membru nou
Mesaje : 4
Localizare : việt nam
Sex : masculin
1 avertisment
Vezi profilul utilizatorului
Re: Tutorial - Simple Drop Down la data de Joi 15 Noi - 9:36

Mesaj sters.
Administrator
Mesaje : 1063
Localizare : Romania
Sex : masculin
Fondator
Vezi profilul utilizatorului http://www.extrem-tutorials.com
Re: Tutorial - Simple Drop Down la data de Mar 31 Dec - 12:12

Trebuie adaugata o previzualizare si testat daca tutorialul mai este functional...

Permisiunile acestui forum:
Nu puteti raspunde la subiectele acestui forum