drop down nav

http://www.noupe.com/tutorial/drop-down-menu-jquery-css.html

can some one tell me how to make this work because i do not understand how ty

Hello, ryo aokawa

Here is the code you need to put on your forum.

The CSS:

Code:

ul.topnav {
    background: url("http://www.sohtanaka.com/web-design/examples/drop-down-menu/topnav_bg.gif") repeat-x scroll 0 0 transparent;
    float: left;
    font-size: 1.2em;
    list-style: none outside none;
    margin: 0;
    padding: 0 20px;
    width: 920px;
}
ul.topnav li {
    float: left;
    margin: 0;
    padding: 0 15px 0 0;
    position: relative;
}
ul.topnav li a {
    color: #FFFFFF;
    display: block;
    float: left;
    padding: 10px 5px;
    text-decoration: none;
}
ul.topnav li a:hover {
    background: url("http://www.sohtanaka.com/web-design/examples/drop-down-menu/topnav_hover.gif") no-repeat scroll center top transparent;
}
ul.topnav li span {
    background: url("http://www.sohtanaka.com/web-design/examples/drop-down-menu/subnav_btn.gif") no-repeat scroll center top transparent;
    float: left;
    height: 35px;
    width: 17px;
}
ul.topnav li span.subhover {
    background-position: center bottom;
    cursor: pointer;
}
ul.topnav li ul.subnav {
    background: none repeat scroll 0 0 #333333;
    border: 1px solid #111111;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    display: none;
    float: left;
    left: 0;
    list-style: none outside none;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 35px;
    width: 170px;
}
ul.topnav li ul.subnav li {
    border-bottom: 1px solid #444444;
    border-top: 1px solid #252525;
    clear: both;
    margin: 0;
    padding: 0;
    width: 170px;
}
html ul.topnav li ul.subnav li a {
    background: url("http://www.sohtanaka.com/web-design/examples/drop-down-menu/dropdown_linkbg.gif") no-repeat scroll 10px center #333333;
    float: left;
    padding-left: 20px;
    width: 145px;
}
html ul.topnav li ul.subnav li a:hover {
    background: url("http://www.sohtanaka.com/web-design/examples/drop-down-menu/dropdown_linkbg.gif") no-repeat scroll 10px center #222222;
}

The HTML: goes in the Templates to (overall_header) you must find this code

Code:

<li>{GENERATED_NAV_BAR}</li>

than add the HTML & jQuery like this

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>
                    <li><a href="#">Sub Nav Link</a></li>
                    <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>

                    <li><a href="#">Sub Nav Link</a></li>
                    <li><a href="#">Sub Nav Link</a></li>
                    <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>
 
<script type="text/javascript" src="http://near-reality123123123.webs.com/bar.js"></script>

And don't forget to save and Publishe

i get eh first bit ....

but then <li>{GENERATED_NAV_BAR}</li> do i take that away or what ????

if you delete that then your current nav will be delete as well

does this code work in invasion forums to ?

could you go into more detail plz

udarsha45 wrote:does this code work in invasion forums to ?

udarsha45, idk cuz i haven't try. ;(

ryo aokawa wrote:could you go into more detail plz

ryo aokawa, this will give you more Info http://www.worlddezign.com/t844-sexy-drop-down-menu

that helped but where do i put the last step ?

what last step?

look at that link you gave me step 3 the last one

The AJAX is to count the PM's.

but where do i put it ?

udarsha45 wrote:does this code work in invasion forums to ?

no because you can not edit templates on invision or phpbb3.
You can only edit templates on phpbb2 and punbb versions

ryo aokawa wrote:but where do i put it ?

whats last step, publish? or add the code to the template.

you just add the code under the part he has marked and in with everything else thats in there.

Male a some space in between, then add the code so it's always easier to go back and find if you need to.

Other then that to publish, you will see a green plus icon after you save the code to the template.
You have to clcik and publish the thats it.

And dont forget to add your links in the code ... lol