Navigare rapidă

Ultimele subiecte
» Bulletin ipb theme
Scris de Iustin Vin 17 Feb - 14:49
» Sliding Menu Bar V5
Scris de RAKSONE Mier 15 Feb - 1:13
» Cereri intrare in staff[Deschise]
Scris de Madross Sam 11 Feb - 21:11
» Cum iti creezi propriul joc online
Scris de xTeRm0 Sam 11 Feb - 14:47
» Informatii Primul Post [IPB Animate]
Scris de bablil Sam 11 Feb - 0:22
Cuvinte-cheie

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

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.
Admin & Dezvoltator
Mesaje : 1063
Localizare : Romania
Sex : masculin
Fondator
Vezi profilul utilizatorului https://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