Navigare rapidă

Ultimele subiecte
» 10 King
Scris de Erpel Vin 29 Mar - 16:31
» Bulletin ipb theme
Scris de MihaiExtremTutorials Sam 15 Dec - 0:24
» Wireless ipb theme [punBB]
Scris de D1esel Vin 30 Noi - 21:51
» Ying-Yang Tutorial
Scris de Lucifer Mar 24 Apr - 11:34
» Avatar forumotion toolbar
Scris de Lucifer Mar 24 Apr - 11:33
Cuvinte-cheie

edit  

OTHER - A different top nav menu


INTRODUCERE:


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

DEMO:


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