The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

drop down nav

View previous topic View next topic Go down

drop down nav

Post by ryo aokawa on August 13th 2011, 2:05 pm

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

ryo aokawa
Forumember

Male Posts : 284
Reputation : 0
Language : english

http://naruto1rpg.all-up.com/index.htm

Back to top Go down

Re: drop down nav

Post by Guest on August 13th 2011, 3:42 pm

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

Guest
Guest


Back to top Go down

Re: drop down nav

Post by ryo aokawa on August 13th 2011, 5:42 pm

i get eh first bit ....

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

ryo aokawa
Forumember

Male Posts : 284
Reputation : 0
Language : english

http://naruto1rpg.all-up.com/index.htm

Back to top Go down

Re: drop down nav

Post by Guest on August 13th 2011, 5:47 pm

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

Guest
Guest


Back to top Go down

Re: drop down nav

Post by udarsha45 on August 13th 2011, 5:48 pm

does this code work in invasion forums to ?

udarsha45
Forumember

Male Posts : 432
Reputation : 2
Language : English
Location : Sri Lanka

http://bleach.5forum.net

Back to top Go down

Re: drop down nav

Post by ryo aokawa on August 13th 2011, 6:00 pm

could you go into more detail plz

ryo aokawa
Forumember

Male Posts : 284
Reputation : 0
Language : english

http://naruto1rpg.all-up.com/index.htm

Back to top Go down

Re: drop down nav

Post by Guest on August 13th 2011, 6:46 pm

@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

Guest
Guest


Back to top Go down

Re: drop down nav

Post by ryo aokawa on August 13th 2011, 7:14 pm

that helped but where do i put the last step ?

ryo aokawa
Forumember

Male Posts : 284
Reputation : 0
Language : english

http://naruto1rpg.all-up.com/index.htm

Back to top Go down

Re: drop down nav

Post by Guest on August 13th 2011, 7:20 pm

what last step?

Guest
Guest


Back to top Go down

Re: drop down nav

Post by ryo aokawa on August 13th 2011, 8:31 pm

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

ryo aokawa
Forumember

Male Posts : 284
Reputation : 0
Language : english

http://naruto1rpg.all-up.com/index.htm

Back to top Go down

Re: drop down nav

Post by Guest on August 13th 2011, 9:14 pm

The AJAX is to count the PM's.

Guest
Guest


Back to top Go down

Re: drop down nav

Post by ryo aokawa on August 14th 2011, 12:22 am

but where do i put it ?

ryo aokawa
Forumember

Male Posts : 284
Reputation : 0
Language : english

http://naruto1rpg.all-up.com/index.htm

Back to top Go down

Re: drop down nav

Post by kirk on August 15th 2011, 3:19 am

@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

kirk
Forumaster

Male Posts : 11037
Reputation : 651
Language : English,Vulcan,Klingon, Romulan,& Gorn

Back to top Go down

Re: drop down nav

Post by Supermanglide on August 15th 2011, 11:21 am

Content Removed

Supermanglide
New Member

Posts : 9
Reputation : 0
Language : english

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum