Cum as putea sa-mi pun un mini meniu in stanga pagini a forumului

Salut Tuturor,as vrea stiu si eu cum as putea sa-mi pun un meniu in Stanga pagini a Forumului meu

Imagine: <script src='http://img542.imageshack.us/shareable/?i=unledxk.png&p=tl' type='text/javascript'><script><noscript></noscript>


Meniul are : "Home,About,Profile,FAQ si Contact US" daca ati putea va rog frumos sa ma ajutati daca stiti...Multumesc !!!

Apropo,folosesc versiunea Puhbb3

Codul acestui meniu se afla pe unele forumuri...
Poti sa intrebi pe administratorul acelui forum de unde a luat codul...

ok ...dar nu-mi prea imi raspunde la intrebare....si na am spus ca poate stiti voi

Poftim codul

Cod:

<style type="text/css">
#navigationMenu{
  position:fixed;
        top: 10px;
        left: 0px;
}
 
#navigationMenu li{
  list-style:none;
  height:39px;
  padding:2px;
  width:40px;
}
 
#navigationMenu span{
  width:0;
  left:38px;
  padding:0;
  position:absolute;
  overflow:hidden;
 
  font-family:'Myriad Pro',Arial, Helvetica, sans-serif;
  font-size:18px;
  font-weight:bold;
  letter-spacing:0.6px;
  white-space:nowrap;
  line-height:39px;
 
  /* CSS3 Transition: */
  -webkit-transition: 0.25s;
  /*-o-transition: 0.25s;*/
 
  /* Future proofing (these do not work yet): */
  -moz-transition: 0.25s;
  transition: 0.25s;
}
 
#navigationMenu a{
  background:url('http://img52.imageshack.us/img52/3637/navigationf.jpg') no-repeat;
 
  height:39px;
  width:38px;
  display:block;
  position:relative;
}
 
/* General hover styles */
 
#navigationMenu a:hover span{ width:auto; padding:0 20px;overflow:visible; }
#navigationMenu a:hover{
  text-decoration:none;
 
  /* CSS outer glow with the box-shadow property */
  -moz-box-shadow:0 0 5px #9ddff5;
  -webkit-box-shadow:0 0 5px #9ddff5;
  box-shadow:0 0 5px #9ddff5;
}
 
/* Green Button */
 
#navigationMenu .home {  background-position:0 0;}
#navigationMenu .home:hover {  background-position:0 -39px;}
#navigationMenu .home span{
  background-color:#7da315;
  color:#3d4f0c;
  text-shadow:1px 1px 0 #99bf31;
}
 
/* Blue Button */
 
#navigationMenu .about { background-position:-38px 0;}
#navigationMenu .about:hover { background-position:-38px -39px;}
#navigationMenu .about span{
  background-color:#1e8bb4;
  color:#223a44;
  text-shadow:1px 1px 0 #44a8d0;
}
 
/* Orange Button */
 
#navigationMenu .services { background-position:-76px 0;}
#navigationMenu .services:hover { background-position:-76px -39px;}
#navigationMenu .services span{
  background-color:#c86c1f;
  color:#5a3517;
  text-shadow:1px 1px 0 #d28344;
}
 
/* Yellow Button */
 
#navigationMenu .portfolio { background-position:-114px 0;}
#navigationMenu .portfolio:hover{ background-position:-114px -39px;}
#navigationMenu .portfolio span{
  background-color:#d0a525;
  color:#604e18;
  text-shadow:1px 1px 0 #d8b54b;
}
 
/* Purple Button */
 
#navigationMenu .contact { background-position:-152px 0;}
#navigationMenu .contact:hover { background-position:-152px -39px;}
#navigationMenu .contact span{
  background-color:#af1e83;
  color:#460f35;
  text-shadow:1px 1px 0 #d244a6;
}
 
 
a, a:visited,a:active {
  color:#0196e3;
  text-decoration:none;
  outline:none;
}
 
a:hover{
  text-decoration:none;
}
 
a img{
  border:none;
}
 
</style>
 
<ul id="navigationMenu">
    <li>
      <a class="home" href="forum.htm">
            <span>Home</span>
        </a>
    </li>
   
    <li>
      <a class="about" href="#">
            <span>About</span>
        </a>
    </li>
   
    <li>
      <a class="services" href="/profile.forum?mode=editprofile">
            <span>Profile</span>
        </a>
    </li>
   
    <li>
      <a class="portfolio" href="portal.htm">
            <span>Portal</span>
        </a>
    </li>
   
    <li>
      <a class="contact" href="/contact.forum">
            <span>Contact us</span>
        </a>
    </li> 
</ul>

Emanuel a scris:Colors Meniu
Salutare Vizitator , in acest tutorial am sa iti prezint meniul Colors Meniu si am sa te imvat si cum sa il aplici pe forumul tau.

Demo: http://emanuel-demonstrati.wikiforum.ro/h3-colors-meniu


Mod de instalare
1.CSS
Panou de administrare > Afisare > Imagini si culori > Culori > Foaie de stil CSS

Cod:


#navigationMenu{
position:fixed;
top: 299px;
left: -36px;}

#navigationMenu li{
list-style:none;
height:39px;
padding:2px;
width:40px;}

#navigationMenu span{
width:0;
left:38px;
padding:0;
position:absolute;
overflow:hidden;
font-family:'Myriad Pro',Arial, Helvetica, sans-serif;
font-size:18px;
font-weight:bold;
letter-spacing:0.6px;
white-space:nowrap;
line-height:39px;
-webkit-transition: 0.25s;
-o-transition: 0.25s; 
-moz-transition: 0.25s;
transition: 0.25s;}

#navigationMenu a{
background:url('http://i24.servimg.com/u/f24/16/24/00/51/butoan10.jpg') no-repeat;
height:39px;
width:38px;
display:block;
position:relative;}


#navigationMenu a:hover span{
width:auto;
padding:0 20px;
overflow:visible; }

#navigationMenu a:hover{
text-decoration:none;
-moz-box-shadow:0 0 5px #9ddff5;
-webkit-box-shadow:0 0 5px #9ddff5;
box-shadow:0 0 5px #9ddff5;}

#navigationMenu .home {
background-position:0 0;}

#navigationMenu .home:hover {
background-position:0 -39px;}

#navigationMenu .home span{
background-color:#7da315;
color:#3d4f0c;
text-shadow:1px 1px 0 #99bf31;}

#navigationMenu .about {
 background-position:-38px 0;}

#navigationMenu .about:hover {
 background-position:-38px -39px;}

#navigationMenu .about span{
background-color:#1e8bb4;
color:#223a44;
text-shadow:1px 1px 0 #44a8d0;}

#navigationMenu .services {
background-position:-76px 0;}

#navigationMenu .services:hover {
 background-position:-76px -39px;}

#navigationMenu .services span{
background-color:#c86c1f;
color:#5a3517;
text-shadow:1px 1px 0 #d28344;}

#navigationMenu .portfolio {
 background-position:-114px 0;}

#navigationMenu .portfolio:hover{
 background-position:-114px -39px;}

#navigationMenu .portfolio span{
background-color:#d0a525;
color:#604e18;
text-shadow:1px 1px 0 #d8b54b;}

#navigationMenu .contact {
 background-position:-152px 0;}

#navigationMenu .contact:hover {
background-position:-152px -39px;}

#navigationMenu .contact span{
background-color:#af1e83;
color:#460f35;
text-shadow:1px 1px 0 #d244a6;}

a, a:visited,a:active {
color:#0196e3;
text-decoration:none;
outline:none;}

a:hover{
text-decoration:none;}

a img{
border:none;}


2.HTML
Adaugati codul urmator in in template-ul overall_header dupa codul

Cod:

  <!-- END hitskin_preview -->

Continutul codului.

  <!-- BEGIN switch_login_popup -->

Cod:


<ul id="navigationMenu">
<li>
            <a class="home" href="www.site.ro">
            <span>Home</span>
 </a>
</li>
 
<li>
              <a class="about" href="www.site.ro">
              <span>About</span>
</a>
</li>
 
<li>
              <a class="services" href="site.ro">
              <span>Profile</span>

</a>
</li>
 
<li>
            <a class="portfolio" href=www.site.ro">
            <span>FAQ</span>
</a>
</li>
 
<li>
        <a class="contact" href="www.site.ro">
            <span>Contact us</span>

</a>
</li>
</ul>

---

Tutorial realizat de:Emanuel
Sursa:Tutorialzine

Tutorial creat de Emanuel.

Cod:

<style type="text/css">
#navigationMenu{
  position:fixed;
        top: 10px;
        left: 0px;
}
 
#navigationMenu li{
  list-style:none;
  height:39px;
  padding:2px;
  width:40px;
}
 
#navigationMenu span{
  width:0;
  left:38px;
  padding:0;
  position:absolute;
  overflow:hidden;
 
  font-family:'Myriad Pro',Arial, Helvetica, sans-serif;
  font-size:18px;
  font-weight:bold;
  letter-spacing:0.6px;
  white-space:nowrap;
  line-height:39px;
 
  /* CSS3 Transition: */
  -webkit-transition: 0.25s;
  /*-o-transition: 0.25s;*/
 
  /* Future proofing (these do not work yet): */
  -moz-transition: 0.25s;
  transition: 0.25s;
}
 
#navigationMenu a{
  background:url('http://img52.imageshack.us/img52/3637/navigationf.jpg') no-repeat;
 
  height:39px;
  width:38px;
  display:block;
  position:relative;
}
 
/* General hover styles */
 
#navigationMenu a:hover span{ width:auto; padding:0 20px;overflow:visible; }
#navigationMenu a:hover{
  text-decoration:none;
 
  /* CSS outer glow with the box-shadow property */
  -moz-box-shadow:0 0 5px #9ddff5;
  -webkit-box-shadow:0 0 5px #9ddff5;
  box-shadow:0 0 5px #9ddff5;
}
 
/* Green Button */
 
#navigationMenu .home {  background-position:0 0;}
#navigationMenu .home:hover {  background-position:0 -39px;}
#navigationMenu .home span{
  background-color:#7da315;
  color:#3d4f0c;
  text-shadow:1px 1px 0 #99bf31;
}
 
/* Blue Button */
 
#navigationMenu .about { background-position:-38px 0;}
#navigationMenu .about:hover { background-position:-38px -39px;}
#navigationMenu .about span{
  background-color:#1e8bb4;
  color:#223a44;
  text-shadow:1px 1px 0 #44a8d0;
}
 
/* Orange Button */
 
#navigationMenu .services { background-position:-76px 0;}
#navigationMenu .services:hover { background-position:-76px -39px;}
#navigationMenu .services span{
  background-color:#c86c1f;
  color:#5a3517;
  text-shadow:1px 1px 0 #d28344;
}
 
/* Yellow Button */
 
#navigationMenu .portfolio { background-position:-114px 0;}
#navigationMenu .portfolio:hover{ background-position:-114px -39px;}
#navigationMenu .portfolio span{
  background-color:#d0a525;
  color:#604e18;
  text-shadow:1px 1px 0 #d8b54b;
}
 
/* Purple Button */
 
#navigationMenu .contact { background-position:-152px 0;}
#navigationMenu .contact:hover { background-position:-152px -39px;}
#navigationMenu .contact span{
  background-color:#af1e83;
  color:#460f35;
  text-shadow:1px 1px 0 #d244a6;
}
 
 
a, a:visited,a:active {
  color:#0196e3;
  text-decoration:none;
  outline:none;
}
 
a:hover{
  text-decoration:none;
}
 
a img{
  border:none;
}
 
</style>
 
<ul id="navigationMenu">
    <li>
      <a class="home" href="forum.htm">
            <span>Home</span>
        </a>
    </li>
   
    <li>
      <a class="about" href="#">
            <span>About</span>
        </a>
    </li>
   
    <li>
      <a class="services" href="/profile.forum?mode=editprofile">
            <span>Profile</span>
        </a>
    </li>
   
    <li>
      <a class="portfolio" href="portal.htm">
            <span>Portal</span>
        </a>
    </li>
   
    <li>
      <a class="contact" href="/contact.forum">
            <span>Contact us</span>
        </a>
    </li> 
</ul>

Am folosit metoda aceasta....dar nu-mi merge...si folosesc Phubb3 nu Phubb2 Imi pare rau

Gassy a scris:

Emanuel a scris:Colors Meniu
Salutare Vizitator , in acest tutorial am sa iti prezint meniul Colors Meniu si am sa te imvat si cum sa il aplici pe forumul tau.

Demo: http://emanuel-demonstrati.wikiforum.ro/h3-colors-meniu


Mod de instalare
1.CSS
Panou de administrare > Afisare > Imagini si culori > Culori > Foaie de stil CSS

Cod:


#navigationMenu{
position:fixed;
top: 299px;
left: -36px;}

#navigationMenu li{
list-style:none;
height:39px;
padding:2px;
width:40px;}

#navigationMenu span{
width:0;
left:38px;
padding:0;
position:absolute;
overflow:hidden;
font-family:'Myriad Pro',Arial, Helvetica, sans-serif;
font-size:18px;
font-weight:bold;
letter-spacing:0.6px;
white-space:nowrap;
line-height:39px;
-webkit-transition: 0.25s;
-o-transition: 0.25s; 
-moz-transition: 0.25s;
transition: 0.25s;}

#navigationMenu a{
background:url('http://i24.servimg.com/u/f24/16/24/00/51/butoan10.jpg') no-repeat;
height:39px;
width:38px;
display:block;
position:relative;}


#navigationMenu a:hover span{
width:auto;
padding:0 20px;
overflow:visible; }

#navigationMenu a:hover{
text-decoration:none;
-moz-box-shadow:0 0 5px #9ddff5;
-webkit-box-shadow:0 0 5px #9ddff5;
box-shadow:0 0 5px #9ddff5;}

#navigationMenu .home {
background-position:0 0;}

#navigationMenu .home:hover {
background-position:0 -39px;}

#navigationMenu .home span{
background-color:#7da315;
color:#3d4f0c;
text-shadow:1px 1px 0 #99bf31;}

#navigationMenu .about {
 background-position:-38px 0;}

#navigationMenu .about:hover {
 background-position:-38px -39px;}

#navigationMenu .about span{
background-color:#1e8bb4;
color:#223a44;
text-shadow:1px 1px 0 #44a8d0;}

#navigationMenu .services {
background-position:-76px 0;}

#navigationMenu .services:hover {
 background-position:-76px -39px;}

#navigationMenu .services span{
background-color:#c86c1f;
color:#5a3517;
text-shadow:1px 1px 0 #d28344;}

#navigationMenu .portfolio {
 background-position:-114px 0;}

#navigationMenu .portfolio:hover{
 background-position:-114px -39px;}

#navigationMenu .portfolio span{
background-color:#d0a525;
color:#604e18;
text-shadow:1px 1px 0 #d8b54b;}

#navigationMenu .contact {
 background-position:-152px 0;}

#navigationMenu .contact:hover {
background-position:-152px -39px;}

#navigationMenu .contact span{
background-color:#af1e83;
color:#460f35;
text-shadow:1px 1px 0 #d244a6;}

a, a:visited,a:active {
color:#0196e3;
text-decoration:none;
outline:none;}

a:hover{
text-decoration:none;}

a img{
border:none;}


2.HTML
Adaugati codul urmator in in template-ul overall_header dupa codul

Cod:

  <!-- END hitskin_preview -->

Continutul codului.

  <!-- BEGIN switch_login_popup -->

Cod:


<ul id="navigationMenu">
<li>
            <a class="home" href="www.site.ro">
            <span>Home</span>
 </a>
</li>
 
<li>
              <a class="about" href="www.site.ro">
              <span>About</span>
</a>
</li>
 
<li>
              <a class="services" href="site.ro">
              <span>Profile</span>

</a>
</li>
 
<li>
            <a class="portfolio" href=www.site.ro">
            <span>FAQ</span>
</a>
</li>
 
<li>
        <a class="contact" href="www.site.ro">
            <span>Contact us</span>

</a>
</li>
</ul>

---

Tutorial realizat de:Emanuel
Sursa:Tutorialzine

Tutorial creat de Emanuel.

Meniul ala i l-am dat si eu

diablomcs a scris:

Cod:

<style type="text/css">
#navigationMenu{
  position:fixed;
        top: 10px;
        left: 0px;
}
 
#navigationMenu li{
  list-style:none;
  height:39px;
  padding:2px;
  width:40px;
}
 
#navigationMenu span{
  width:0;
  left:38px;
  padding:0;
  position:absolute;
  overflow:hidden;
 
  font-family:'Myriad Pro',Arial, Helvetica, sans-serif;
  font-size:18px;
  font-weight:bold;
  letter-spacing:0.6px;
  white-space:nowrap;
  line-height:39px;
 
  /* CSS3 Transition: */
  -webkit-transition: 0.25s;
  /*-o-transition: 0.25s;*/
 
  /* Future proofing (these do not work yet): */
  -moz-transition: 0.25s;
  transition: 0.25s;
}
 
#navigationMenu a{
  background:url('http://img52.imageshack.us/img52/3637/navigationf.jpg') no-repeat;
 
  height:39px;
  width:38px;
  display:block;
  position:relative;
}
 
/* General hover styles */
 
#navigationMenu a:hover span{ width:auto; padding:0 20px;overflow:visible; }
#navigationMenu a:hover{
  text-decoration:none;
 
  /* CSS outer glow with the box-shadow property */
  -moz-box-shadow:0 0 5px #9ddff5;
  -webkit-box-shadow:0 0 5px #9ddff5;
  box-shadow:0 0 5px #9ddff5;
}
 
/* Green Button */
 
#navigationMenu .home {  background-position:0 0;}
#navigationMenu .home:hover {  background-position:0 -39px;}
#navigationMenu .home span{
  background-color:#7da315;
  color:#3d4f0c;
  text-shadow:1px 1px 0 #99bf31;
}
 
/* Blue Button */
 
#navigationMenu .about { background-position:-38px 0;}
#navigationMenu .about:hover { background-position:-38px -39px;}
#navigationMenu .about span{
  background-color:#1e8bb4;
  color:#223a44;
  text-shadow:1px 1px 0 #44a8d0;
}
 
/* Orange Button */
 
#navigationMenu .services { background-position:-76px 0;}
#navigationMenu .services:hover { background-position:-76px -39px;}
#navigationMenu .services span{
  background-color:#c86c1f;
  color:#5a3517;
  text-shadow:1px 1px 0 #d28344;
}
 
/* Yellow Button */
 
#navigationMenu .portfolio { background-position:-114px 0;}
#navigationMenu .portfolio:hover{ background-position:-114px -39px;}
#navigationMenu .portfolio span{
  background-color:#d0a525;
  color:#604e18;
  text-shadow:1px 1px 0 #d8b54b;
}
 
/* Purple Button */
 
#navigationMenu .contact { background-position:-152px 0;}
#navigationMenu .contact:hover { background-position:-152px -39px;}
#navigationMenu .contact span{
  background-color:#af1e83;
  color:#460f35;
  text-shadow:1px 1px 0 #d244a6;
}
 
 
a, a:visited,a:active {
  color:#0196e3;
  text-decoration:none;
  outline:none;
}
 
a:hover{
  text-decoration:none;
}
 
a img{
  border:none;
}
 
</style>
 
<ul id="navigationMenu">
    <li>
      <a class="home" href="forum.htm">
            <span>Home</span>
        </a>
    </li>
   
    <li>
      <a class="about" href="#">
            <span>About</span>
        </a>
    </li>
   
    <li>
      <a class="services" href="/profile.forum?mode=editprofile">
            <span>Profile</span>
        </a>
    </li>
   
    <li>
      <a class="portfolio" href="portal.htm">
            <span>Portal</span>
        </a>
    </li>
   
    <li>
      <a class="contact" href="/contact.forum">
            <span>Contact us</span>
        </a>
    </li> 
</ul>

Am folosit metoda aceasta....dar nu-mi merge...si folosesc Phubb3 nu Phubb2 Imi pare rau

Functioneaza, unde vrei sa-l adaugi?

CSS nu?

Nu, e un cod html, nu se adauga in css. Unde doresti sa-l pui?

Frate eu as vrea sa fac fix ca in imaginea de sus....unde am postat....deci unde lo pus si administratorul forumului...daca ma poti ajuta...

diablomcs a scris:Frate eu as vrea sa fac fix ca in imaginea de sus....unde am postat....deci unde lo pus si administratorul forumului...daca ma poti ajuta...

El se refera unde? Pe pagina de start, sau pe toate paginile?

diablomcs a scris:Frate eu as vrea sa fac fix ca in imaginea de sus....unde am postat....deci unde lo pus si administratorul forumului...daca ma poti ajuta...

am inteles "frate", de aceea ti-am dat codul meniului din imagine, dar te-am intrebat UNDE vrei sa-l adaugi. Pe pagina de start, pe toate paginile, etc ?