Top subiecte apreciate

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

Navigare rapidă

Ultimele subiecte
» 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
» Script ninsoare
Scris de JeKa123 Vin 2 Dec - 20:20
» Cerere script
Scris de SSYT Joi 1 Dec - 23:22
Cuvinte-cheie

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

OTHER - A different top nav menu


INTRODUCERE:


Acest mic meniu facut special pentru forumurile facute pe forumgratuit.ro !

DEMO:


http://www.extrem-tutorials.com/h27-a-different-top-nav


TUTORIAL:


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

Cod:
/*-----A different top Nav------*/

html, body {
   text-align: center;
   margin: 0px;
   height: 100%;
   width: 100%;
}
#wrap {
   margin-left: auto;
   margin-right: auto;
   width: 900px;
   position: relative;
   min-height: 600px;
}
#body-image {
   margin-top: 60px;
}
#main-nav {
   margin: 0px 0px 0px 2px;
   text-align: left;
   min-height: 25px;
   padding-top: 10px;
   padding-left: 0px;
}
#main-handle {
   width: 605px;
   float: right;
   margin-top: -1px;
}
#main-nav li {
   display: inline;
   list-style: none;
}
#main-nav li a {
   margin-right: 5px;
   font-size: 15px;
   text-decoration: none;
   color: #f2f2f2;
   font-family: Arial, Helvetica, sans-serif;
   text-transform: uppercase;
   font-weight: bold;
   padding: 10px;
   outline: 0;
   position: relative;
   top: -2px;
}
#main-nav li a:hover, #main-nav li a.active {
   background: #514539;
}
#sub-link-bar {
   background: #514539;
   min-height: 10px;
   border-bottom: #645546 1px solid;
}
.sub-links {
   display: none;
   position: absolute;
   width: 100%;
   top: -30px;
   text-align: left;
   left: 0px;
}
#main-nav li .sub-links li a:hover{
   background: #2d2620;
}
#main-nav li a.close{
   display: none;   
   position: absolute;
}
#main-nav li a.close:hover{
   background: #900;
}
<!--Thanks Spiffy Corners-->
.round {
   display:block
}
.round * {
   display:block;
   height:1px;
   overflow:hidden;
   font-size:.01em;
   background:#645546
}
.round1 {
   margin-left:3px;
   margin-right:3px;
   padding-left:1px;
   padding-right:1px;
   border-left:1px solid #443a30;
   border-right:1px solid #443a30;
   background:#56493c
}
.round2 {
   margin-left:1px;
   margin-right:1px;
   padding-right:1px;
   padding-left:1px;
   border-left:1px solid #322a23;
   border-right:1px solid #322a23;
   background:#594c3e
}
.round3 {
   margin-left:1px;
   margin-right:1px;
   border-left:1px solid #594c3e;
   border-right:1px solid #594c3e;
}
.round4 {
   border-left:1px solid #443a30;
   border-right:1px solid #443a30
}
.round5 {
   border-left:1px solid #56493c;
   border-right:1px solid #56493c
}
.roundfg {
   background:#645546
}
html, body {
   background: #2d2620;
   text-align: center;
   margin: 0px;
   height: 100%;
   width: 100%;
}
#wrap {
   margin-left: auto;
   margin-right: auto;
   width: 900px;
   position: relative;
   min-height: 600px;
}
#body-image {
   margin-top: 60px;
}
#main-nav {
   margin: 0px 0px 0px 2px;
   text-align: left;
   min-height: 25px;
   padding-top: 10px;
   padding-left: 0px;
}
#main-handle {
   width: 605px;
   float: right;
   margin-top: -1px;
}
#main-nav li {
   display: inline;
   list-style: none;
}
#main-nav li a {
   margin-right: 5px;
   font-size: 15px;
   text-decoration: none;
   color: #f2f2f2;
   font-family: Arial, Helvetica, sans-serif;
   text-transform: uppercase;
   font-weight: bold;
   padding: 10px;
   outline: 0;
   position: relative;
   top: -2px;
}
#main-nav li a:hover, #main-nav li a.active {
   background: #514539;
}
#sub-link-bar {
   background: #514539;
   min-height: 10px;
   border-bottom: #645546 1px solid;
}
.sub-links {
   display: none;
   position: absolute;
   width: 100%;
   top: -30px;
   text-align: left;
   left: 0px;
}
#main-nav li .sub-links li a:hover{
   background: #2d2620;
}
#main-nav li a.close{
   display: none;   
   position: absolute;
}
#main-nav li a.close:hover{
   background: #900;
}
<!--Thanks Spiffy Corners-->
.round {
   display:block
}
.round * {
   display:block;
   height:1px;
   overflow:hidden;
   font-size:.01em;
   background:#645546
}
.round1 {
   margin-left:3px;
   margin-right:3px;
   padding-left:1px;
   padding-right:1px;
   border-left:1px solid #443a30;
   border-right:1px solid #443a30;
   background:#56493c
}
.round2 {
   margin-left:1px;
   margin-right:1px;
   padding-right:1px;
   padding-left:1px;
   border-left:1px solid #322a23;
   border-right:1px solid #322a23;
   background:#594c3e
}
.round3 {
   margin-left:1px;
   margin-right:1px;
   border-left:1px solid #594c3e;
   border-right:1px solid #594c3e;
}
.round4 {
   border-left:1px solid #443a30;
   border-right:1px solid #443a30
}
.round5 {
   border-left:1px solid #56493c;
   border-right:1px solid #56493c
}
.roundfg {
   background:#645546
}

2. Copiati meniul de mai jos, si puneti-l in template-ul overall_header dupa codul
<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">

Template-ul il gasiti in:
Panou de administrare > Afisare > Template-uri > General > overall_header

Cod:
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
   $("#main-nav li a.main-link").hover(function(){
      $("#main-nav li a.close").fadeIn();
      $("#main-nav li a.main-link").removeClass("active");                                    
      $(this).addClass("active");                              
      $("#sub-link-bar").animate({
         height: "40px"                
      });
      $(".sub-links").hide();
      $(this).siblings(".sub-links").fadeIn();
   });
   $("#main-nav li a.close").click(function(){
      $("#main-nav li a.main-link").removeClass("active");                                                                
      $(".sub-links").fadeOut();
      $("#sub-link-bar").animate({
         height: "10px"                
      });      
      $("#main-nav li a.close").fadeOut();
   });
   
   
});

</script>
</head>
<body>
<div id="sub-link-bar"> </div>

<!-- End sub-link-bar -->
<div id="wrap">
  <div id="main-handle">
    <div class="roundfg">
      <ul id="main-nav">
        <li><a class="main-link" href="/forum.htm">Acasa</a>
           

        </li>
        <li><a class="main-link" href="#">Galerie</a>
          <ul class="sub-links">

            <li><a href="#">Fotografii</a> </li>
            <li><a href="#">Articole</a> </li>

            <li><a href="#">Altele</a> </li>
            <li><a href="#">Design</a> </li>
        <li><a href="#">Tutoriale</a></li>                         
         
          </ul>

        </li>
               
        <li><a class="main-link" href="#">Divertisment</a>

           <ul class="sub-links">
            <li><a href="#">Galerie video</a> </li>
       <li><a href="#">Galerie foto</a> </li>
       <li><a href="#">Galerie audio</a> </li>

           </ul>
        </li>
        <li><a class="main-link" href="#">Despre mine</a>
           <ul class="sub-links">
               <li><a href="#">Cateva cuvinte</a></li>
           <li><a href="#">Prieteni</a></li>
           <li><a href="#">Diverse</a></li>
                <li><a href="/feeds" title="RSS Feeds">RSS Feedback</a></li>
               
            </ul>

        </li><li><a class="about" href="#">Contact</a></li>
        <li><a class="close" title="Inchide" href="#">X</a></li>
      </ul>
    </div>
    <!-- End roundfg -->
    <b class="round"> <b class="round5"></b> <b class="round4"></b> <b class="round3"></b> <b class="round2"><b></b></b> <b class="round1"><b></b></b></b> </div>

  <!-- End main-handle-->

Comentariile utilizatorilor
Vizitator
la data de Sam 23 Apr - 14:05
Vizitato Vizitator
Conectat
Nu-mi prea place pentru ca e cam ciudata ideea. Dar oricum, pentru unii e destul de buna.
Membru ET
la data de Sam 23 Apr - 15:01
BaCk Membru ET
Conectat
E interesant cum e facut, imi place!
Membru ET
la data de Vin 9 Sept - 17:29
denisdeni22 Membru ET
Conectat
eu il folosesc
Membru ET
la data de Joi 27 Oct - 16:25
Clik Membru ET
Conectat
Eu nu gasesc nicaieri in templateul meu codul
la mine unele template-uri au fost modificate deoarece am o tema personalizata.
Imi puteti face un prin unde as gasi codul (ca poate nul vad) sau sa imi spuneti un alt mod de a pune codul.

A si nu se poate incat culoarea sa din maro sa fie gri ?

Multumesc !
Membru ET
la data de Joi 27 Oct - 16:26
Clik Membru ET
Conectat
[Trebuie sa fiti inscris si conectat pentru a vedea acest link] a scris:Eu nu gasesc nicaieri in templateul meu codul
Cod:
<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">
la mine unele template-uri au fost modificate deoarece am o tema personalizata.
Imi puteti face un prin unde as gasi codul (ca poate nul vad) sau sa imi spuneti un alt mod de a pune codul.

A si nu se poate incat culoarea sa din maro sa fie gri ?

Multumesc !
Membru ET
la data de Lun 31 Oct - 23:13
adyx Membru ET
Conectat
e dragut ....dar pe mine nu ma atrage acest meniu:)
Membru ET
la data de Mier 2 Noi - 15:16
Clik Membru ET
Conectat
Cineva imi raspunde va rog la mesajul meu de mai sus ?
Membru dedicat
la data de Mier 2 Noi - 21:53
Keir Membru dedicat
Conectat
Clik, pentru problema dvs. vă rugăm să deschideţi un nou topic la secţiunea de suport şi vă vom ajuta cu plăcere!
Membru ET
la data de Mier 2 Noi - 22:29
GeKo Membru ET
Conectat
[Trebuie sa fiti inscris si conectat pentru a vedea acest link] a scris:E interesant cum e facut, imi place!
Membru activ
la data de Joi 3 Noi - 15:30
iAngel Membru activ
Conectat
[Trebuie sa fiti inscris si conectat pentru a vedea acest link] a scris:E interesant cum e facut, imi place!
si mie imi place,e frumos!
Vizitator
la data de Dum 27 Noi - 15:50
Vizitato Vizitator
Conectat
Prea tare bravo !
Membru ET
la data de Joi 8 Dec - 15:35
RaduMan96 Membru ET
Conectat
mie unu nu imi place