Navigare rapidă

Ultimele subiecte
» [Animate] Recent Topic IPB
Scris de Petronel™ Sam 25 Feb - 18:38
» Categorii retractabile
Scris de Petronel™ Sam 25 Feb - 18:28
» Informatii Primul Post [IPB Animate]
Scris de Petronel™ Sam 25 Feb - 18:24
» Bulletin ipb theme
Scris de Iustin Vin 17 Feb - 14:49
» Sliding Menu Bar V5
Scris de RAKSONE Mier 15 Feb - 1:13
Cuvinte-cheie

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

OTHER - A different top nav menu


INTRODUCERE:


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

DEMO:


http://extrem-tutorials.online-talk.net/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