Navigare rapidă

Ultimele subiecte
» Complete VB
Scris de Eslam Love Ieri la 18:51
» Categorii retractabile
Scris de Eslam Love Ieri la 18:16
» Prezentare Cristian
Scris de cristiankiss Mar 20 Iun - 8:12
» Prezentare Petronel YT
Scris de Cătălin. Vin 16 Iun - 1:45
Cuvinte-cheie

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

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
avatar
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
avatar
la data de Sam 23 Apr - 15:01
BaCk Membru ET
Conectat
E interesant cum e facut, imi place!
Membru ET
avatar
la data de Vin 9 Sept - 17:29
denisdeni22 Membru ET
Conectat
eu il folosesc
Membru ET
avatar
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
avatar
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
avatar
la data de Lun 31 Oct - 23:13
adyx Membru ET
Conectat
e dragut ....dar pe mine nu ma atrage acest meniu:)
Membru ET
avatar
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
avatar
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
avatar
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
avatar
la data de Dum 27 Noi - 15:50
Vizitato Vizitator
Conectat
Prea tare bravo !
Membru ET
avatar
la data de Joi 8 Dec - 15:35
RaduMan96 Membru ET
Conectat
mie unu nu imi place