Bun venit pe Phpbbbonline, va rugam sa va inregistrati , multumim!
-Forumul nostru ,ofera servicii gratuite in domeniile: Metin2 , Graphic design , coding !

Dupa conectare , va rugam sa postati!

Super DropDown menu

In jos

Super DropDown menu

Mesaj Scris de bonito23 la data de Mier Aug 03, 2011 11:56 pm

Aici este un drop down,facut de mine...dupa un tutorial.
1)Sa va plimbati cu mouseul peste tot...nu este un simplu dorp down
Previzualizare: [Trebuie sa fiti inscris si conectat pentru a vedea acest link]
Instalare:
1)Puteti adauga urmatorul cod oriunde: CSS, overall_header etc.

Cod:
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);

  background: #8b8b8b; /* for non-css3 browsers */
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#a9a9a9', endColorstr='#7a7a7a'); /* for IE */
  background: -webkit-gradient(linear, left top, left bottom, from(#a9a9a9), to(#7a7a7a)); /* for webkit browsers */
  background: -moz-linear-gradient(top,  #a9a9a9,  #7a7a7a); /* for firefox 3.6+ */

  border: solid 1px #6d6d6d;
}
#nav li {
  margin: 0 5px;
  padding: 0 0 8px;
  float: left;
  position: relative;
  list-style: none;
}
/* main level link */
#nav a {
  font-weight: bold;
  color: #e7e5e5;
  text-decoration: none;
  display: block;
  padding:  8px 20px;
  margin: 0;
  -webkit-border-radius: 1.6em;
  -moz-border-radius: 1.6em;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
}
/* main level link hover */
#nav .current a, #nav li:hover > a {
  background: #d1d1d1; /* for non-css3 browsers */
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ebebeb', endColorstr='#a1a1a1'); /* for IE */
  background: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#a1a1a1)); /* for webkit browsers */
  background: -moz-linear-gradient(top,  #ebebeb,  #a1a1a1); /* for firefox 3.6+ */

  color: #444;
  border-top: solid 1px #f8f8f8;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
  -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
}
/* sub levels link hover */
#nav ul li:hover a, #nav li:hover li a {
  background: none;
  border: none;
  color: #666;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
}
#nav ul a:hover {
  background: #0399d4 !important; /* for non-css3 browsers */
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#04acec', endColorstr='#0186ba'); /* for IE */
  background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba)) !important; /* for webkit browsers */
  background: -moz-linear-gradient(top,  #04acec,  #0186ba) !important; /* for firefox 3.6+ */

  color: #fff !important;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .1);
}
/* level 2 list */
#nav ul {
  background: #ddd; /* for non-css3 browsers */
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#cfcfcf'); /* for IE */
  background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#cfcfcf)); /* for webkit browsers */
  background: -moz-linear-gradient(top,  #fff,  #cfcfcf); /* for firefox 3.6+ */

  display: none;
  margin: 0;
  padding: 0;
  width: 185px;
  position: absolute;
  top: 35px;
  left: 0;
  border: solid 1px #b4b4b4;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}
/* dropdown */
#nav li:hover > ul {
  display: block;
}
#nav ul li {
  float: none;
  margin: 0;
  padding: 0;
}
#nav ul a {
  font-weight: normal;
  text-shadow: 0 1px 1px rgba(255, 255, 255, .9);
}
/* level 3+ list */
#nav ul ul {
  left: 181px;
  top: -3px;
}
/* rounded corners for first and last child */
#nav ul li:first-child > a {
  -webkit-border-top-left-radius: 9px;
  -moz-border-radius-topleft: 9px;
  -webkit-border-top-right-radius: 9px;
  -moz-border-radius-topright: 9px;
}
#nav ul li:last-child > a {
  -webkit-border-bottom-left-radius: 9px;
  -moz-border-radius-bottomleft: 9px;
  -webkit-border-bottom-right-radius: 9px;
  -moz-border-radius-bottomright: 9px;
}
/* clearfix */
#nav:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
#nav {
  display: inline-block;
}
html[xmlns] #nav {
  display: block;
}
* html #nav {
  height: 1%;
}
</style>
<script src="chrome-extension://lifbcibllhkdhoafpjfnlhfpfgnpldfl/document_iterator.js"></script><script src="chrome-extension://lifbcibllhkdhoafpjfnlhfpfgnpldfl/find_proxy.js"></script><script src="chrome-extension://lifbcibllhkdhoafpjfnlhfpfgnpldfl/get_html_text.js"></script><script src="chrome-extension://lifbcibllhkdhoafpjfnlhfpfgnpldfl/global_constants.js"></script><script src="chrome-extension://lifbcibllhkdhoafpjfnlhfpfgnpldfl/name_injection_builder.js"></script><script src="chrome-extension://lifbcibllhkdhoafpjfnlhfpfgnpldfl/number_injection_builder.js"></script><script src="chrome-extension://lifbcibllhkdhoafpjfnlhfpfgnpldfl/string_finder.js"></script><meta name="document_iterator.js"><meta name="find_proxy.js"><meta name="get_html_text.js"><meta name="global_constants.js"><meta name="name_injection_builder.js"><meta name="number_injection_builder.js"><meta name="string_finder.js"></head>
<body>
<ul id="nav">
  <li class="current"><a href="#">ExtremTutorials</a></li>
  <li><a href="#">Extrem Tutorials</a>
      <ul>
        <li><a href="#">Nume</a>
            <ul>
              <li><a href="#">Nume</a></li>
              <li><a href="#">Nume</a></li>
              <li><a href="#">Nume</a></li>
              <li><a href="#">Nume</a></li>
            </ul>
        </li>
        <li><a href="#">Nume</a>
            <ul>
              <li><a href="#">Nume</a></li>
            </ul>
        </li>
        <li><a href="#">Nume</a></li>
        <li><a href="#">Nume</a></li>
      </ul>
  </li>
  <li><a href="#">Nume</a>
      <ul>
        <li><a href="#">Nume</a>
            <ul>
              <li><a href="#">Nume</a></li>
              <li><a href="#">Nume</a>
                  <ul>
                    <li><a href="#">Nume</a></li>
                    <li><a href="#">Nume</a></li>
                    <li><a href="#">Nume</a></li>
                  </ul>
              </li>
              <li><a href="#">Nume</a></li>
            </ul>
        </li>
        <li><a href="#">Nume</a></li>
        <li><a href="#">Nume</a></li>
        <li><a href="#">Nume</a>
            <ul>
              <li><a href="#">Nume</a></li>
              <li><a href="#">Nume</a></li>
              <li><a href="#">Nume</a></li>
            </ul>
        </li>
      </ul>
  </li>
  <li><a href="#">Nume</a></li>
  <li><a href="#">Nume</a></li>
</ul>


</object></html>
avatar
bonito23
Elev nou
Elev nou

Mesaje Mesaje : 12

Vezi profilul utilizatorului

Sus In jos

Re: Super DropDown menu

Mesaj Scris de BoYkA la data de Mier Aug 03, 2011 11:57 pm

Foarte bun tutorialul Mad
-TUTORIAL ACCEPTAT!


Alexandru is over here xD
[b][i]

avatar
BoYkA
Grafician
Grafician

Mesaje Mesaje : 123
Varstă Varstă : 25

Vezi profilul utilizatorului

Sus In jos

Re: Super DropDown menu

Mesaj Scris de Style? la data de Joi Aug 04, 2011 12:01 am

Bravo,bravo,bravo!
Iti dau nota 10 pe acest tutorial. Desi nu l-am testat previzualizarea este extrema Very Happy
avatar
Style?
Asistent
Asistent

Mesaje Mesaje : 214
Varstă Varstă : 26

Vezi profilul utilizatorului

Sus In jos

Re: Super DropDown menu

Mesaj Scris de NiKe la data de Joi Aug 04, 2011 4:23 am

Foarte bun tutorialul. Felicitari!


Respecta si vei fi respectat!
-Inainte de a posta , citeste regulamentul!


avatar
NiKe
Administrator
Administrator

Mesaje Mesaje : 284
Varstă Varstă : 21

Vezi profilul utilizatorului http://gamingarea.forum.st

Sus In jos

Re: Super DropDown menu

Mesaj Scris de Continut sponsorizat


Continut sponsorizat


Sus In jos

Sus

- Subiecte similare

 
Permisiunile acestui forum:
Nu puteti raspunde la subiectele acestui forum