A different top nav[MENU]

Subject: A different top nav[MENU] Tue Jun 28, 2011 12:33 am

INTRODUCERE:

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

DEMO:

http://extrem-tutorials.forumotion.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

Code:: /*-----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;
}

.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;
}

.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

Code:: <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>


<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>

<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>

Subject: Re: A different top nav[MENU] Tue Jun 28, 2011 1:10 am

Foarte frumos meniul

Subject: Re: A different top nav[MENU] Tue Jun 28, 2011 1:27 am

Foarte frumos,meniul arata chiar bine !

Subject: Re: A different top nav[MENU] Sat Oct 15, 2011 2:26 pm

Topic trimis la cos!