can anybody teach me how to add down down menu like here
-->http://www.noupe.com/tutorial/drop-down-menu-jquery-css.html

i like it because it really rocks!

Hi,

It requires template editing and some coding knowledge too.

You can add the CSS codes in your forum style sheet, javascript code goes before </head> in the overall_header template and the HTML code goes where you want the menu to appear.

i know coding but not really mastered because im just 1 year in forumotion but i didnt go in help forums since 8 months i just newly started in help forum sections.

You should at least know what HTML and CSS is and you should know how to add JavaScript to your page.

Do what I posted above and you get the menu to work. Rest the explanation is given on the tutorial page itself

i know coding and html applying just give me the code...

The codes are already given here : http://www.noupe.com/tutorial/drop-down-menu-jquery-css.html

Come on guys...do something youself...dont request for a copy-paste code...

Nick wrote:Come on guys...do something youself...dont request for a copy-paste code...

What if somebody don't know how to do it and ofc he will ask for help so if you are that kind to help...just help him instead of posting random posts.

Maki wrote:

Nick wrote:Come on guys...do something youself...dont request for a copy-paste code...

What if somebody don't know how to do it and ofc he will ask for help so if you are that kind to help...just help him instead of posting random posts.

If someone doesn't know how to do basic HTML/CSS, I am kind enough to help by pointing them to places like w3schools.com where they can learn on their own.

I will also provide basic help and guidance which may at times include code. Beyond that, I am happy to help as well, but it will require a guaranteed form of payment. In the real world, people aren't going to do your work without expecting to be paid. Consider it an early life lesson.

hey can i ask where should i apply this and where part should.

Go to overall_header template, find this part <div id="pun-head">

Add the following code right after that...

Code:

<ul class="topnav">
    <li><a href="#">Home</a></li>
    <li>
        <a href="#">Tutorials</a>
        <ul class="subnav">
            <li><a href="#">Sub Nav Link</a></li>
            <li><a href="#">Sub Nav Link</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Resources</a>
        <ul class="subnav">
            <li><a href="#">Sub Nav Link</a></li>
            <li><a href="#">Sub Nav Link</a></li>
        </ul>
    </li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Advertise</a></li>
    <li><a href="#">Submit</a></li>
    <li><a href="#">Contact Us</a></li>
</ul>

Now find </head> in the same template, and add the following code BEFORE that...

Code:

<script type="text/javascript">
$(document).ready(function(){

   $("ul.subnav").parent().append("<span></span>"); //Only shows drop down trigger when js is enabled (Adds empty span tag after ul.subnav*)

   $("ul.topnav li span").click(function() { //When trigger is clicked...

      //Following events are applied to the subnav itself (moving subnav up and down)
      $(this).parent().find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on click

      $(this).parent().hover(function() {
      }, function(){
         $(this).parent().find("ul.subnav").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up
      });

      //Following events are applied to the trigger (Hover events for the trigger)
      }).hover(function() {
         $(this).addClass("subhover"); //On hover over, add class "subhover"
      }, function(){   //On Hover Out
         $(this).removeClass("subhover"); //On hover out, remove class "subhover"
   });

});
</script>

Now, save and publish the template.

Now you have to add this code in your CSS...

Code:

ul.topnav {
   list-style: none;
   padding: 0 20px;
   margin: 0;
   float: left;
   width: 920px;
   background: #222;
   font-size: 1.2em;
   background: url(topnav_bg.gif) repeat-x;
}
ul.topnav li {
   float: left;
   margin: 0;
   padding: 0 15px 0 0;
   position: relative; /*--Declare X and Y axis base for sub navigation--*/
}
ul.topnav li a{
   padding: 10px 5px;
   color: #fff;
   display: block;
   text-decoration: none;
   float: left;
}
ul.topnav li a:hover{
   background: url(topnav_hover.gif) no-repeat center top;
}
ul.topnav li span { /*--Drop down trigger styles--*/
   width: 17px;
   height: 35px;
   float: left;
   background: url(subnav_btn.gif) no-repeat center top;
}
ul.topnav li span.subhover {background-position: center bottom; cursor: pointer;} /*--Hover effect for trigger--*/
ul.topnav li ul.subnav {
   list-style: none;
   position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/
   left: 0; top: 35px;
   background: #333;
   margin: 0; padding: 0;
   display: none;
   float: left;
   width: 170px;
   border: 1px solid #111;
}
ul.topnav li ul.subnav li{
   margin: 0; padding: 0;
   border-top: 1px solid #252525; /*--Create bevel effect--*/
   border-bottom: 1px solid #444; /*--Create bevel effect--*/
   clear: both;
   width: 170px;
}
html ul.topnav li ul.subnav li a {
   float: left;
   width: 145px;
   background: #333 url(dropdown_linkbg.gif) no-repeat 10px center;
   padding-left: 20px;
}
html ul.topnav li ul.subnav li a:hover { /*--Hover effect for subnav links--*/
   background: #222 url(dropdown_linkbg.gif) no-repeat 10px center;
}

@ankillien there is no <div id="pun-head"> in over_header i press ctrl+f i search dont appears y?

Maki wrote:

Nick wrote:Come on guys...do something youself...dont request for a copy-paste code...

What if somebody don't know how to do it and ofc he will ask for help so if you are that kind to help...just help him instead of posting random posts.

instead of giving him a copy-paste code (like ankillien did now) why not tell him where to add the codes?

also,this was seen for the first time at Creative-Labz.It was emilio's idea.So its not correct to give the copy-paste to whoever asks for it.Thats why Creative-Labz gets copied every day and more and moremembers here keep asking how to achieve things like CL at their forum.I will tell you how to achieve this,but not copy-paste codes.Unfair.They Spend the whole day trying to add this to their website/forum and then a n00b comes here,requests it and you give him the code ready to copy-paste it?Unfair!

also,this was seen for the first time at Creative-Labz.It was emilio's idea.So its not correct to give the copy-paste to whoever asks for it.Thats why Creative-Labz gets copied every day and more and moremembers here keep asking how to achieve things like CL at their forum.I will tell you how to achieve this,but not copy-paste codes.Unfair.They Spend the whole day trying to add this to their website/forum and then a n00b comes here,requests it and you give him the code ready to copy-paste it?Unfair!

I completely agree with you in principle. I would be very angry if someone, without my permission, posted code that I wrote.

But is that the case here? It appears that ankillien took code from a demo and showed people how to make it work on forumotion PunBB boards. Exactly what you said above, in the text that I boldfaced.

in my forum i don't look these:

#Spacca wrote:in my forum i don't look these:

ahh here you are again
what else will you copy ?

Man,you dont even know english(since i cant understand what you are saying).Use a free translator from italian to english and make a correct post.

On topic,if you dont see it means somethings wrong with the code.Which means you should learn some coding basics

Well, in my forum when i apply the codes this: doesn't appear!

Well, we have a policy against this thing called ripping. Those images, you are ripping them.

@blade99
Then it could be there in index_body template.

@Nick, dion has spoken my words. I have posted codes from the tutorial site and not yours. Also, the drop-down menu codes on your site are from some tutorial site and the show/hide categories and profiles are coded by me. If you search forums, you'll find those solved and locked topics

So, we are not to be blamed if your site gets copied. What you are saying is that helping someone to install a drop-down menu (which is from a tutorial site and not coded by you) is UNFAIR! This is like an insult to me.

Refrain form posting such messages in future, my friend! At least think one more time before hitting the 'Send' button.

ankilien Wrote:

@blade99
Then it could be there in index_body template.

still its not on index_body --> <div id="pun-head"> ?