Top subiecte apreciate

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

Navigare rapidă

Ultimele subiecte
» Legenda s-a intors XD
Scris de EDGE Ieri la 20:42
» salut
Scris de Andrei34 Dum 18 Sept - 18:53
» Salut
Scris de Andrei34 Dum 18 Sept - 18:52
» Wireless ipb theme [punBB]
Scris de cristii571 Lun 12 Sept - 14:34
Cuvinte-cheie

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

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