Welcome to Creative Nation!

Welcome to Creative Nation, . Feel free to browse our forums and help yourself to all our free tutorials, images, and recources!

Download

To download this script go back to article »

Member Login

Lost your password?

Not a member yet? Sign Up!

Hay im trying to make a special nav bar.


The next generation of web design.


You are not connected. Please login or register

Hay im trying to make a special nav bar.

View previous topic View next topic Go down  Message [Page 1 of 1]

Blue.

avatar

http://www.sohtanaka.com/web-design/horizontal-sub-nav-with-css-jquery/

I can't work it out

Im a noob when it comes to javascript and css so how would I go about it

Do it in steps please I really would appriciate it.

ArChKnIgHt

avatar

hello,
its so simple just add this to CSS
Spoiler:
Code:
ul#topnav {
   margin: 0; padding: 0;
   float: left;
   width: 970px;
   list-style: none;
   position: relative;
   font-size: 1.2em;
   background: url(http://www.sohtanaka.com/web-design/examples/horizontal-subnav/topnav_stretch.gif) repeat-x;
}
ul#topnav li {
   float: left;
   margin: 0; padding: 0;
   border-right: 1px solid #555;
}
ul#topnav li a {
   padding: 5px 15px;
   display: block;
   color: #f0f0f0;
   text-decoration: none;
}
ul#topnav li:hover { background: #1376c9 url(http://www.sohtanaka.com/web-design/examples/horizontal-subnav/topnav_active.gif) repeat-x; }
ul#topnav li span {
   float: left;
   padding: 15px 0;
   position: absolute;
   left: 0; top:35px;
   display: none;
   width: 970px;
   background: #1376c9;
   color: #fff;
   -moz-border-radius-bottomright: 5px;
   -khtml-border-radius-bottomright: 5px;
   -webkit-border-bottom-right-radius: 5px;
   -moz-border-radius-bottomleft: 5px;
   -khtml-border-radius-bottomleft: 5px;
   -webkit-border-bottom-left-radius: 5px;
}
ul#topnav li:hover span { display: block; }
ul#topnav li span a { display: inline; }
ul#topnav li span a:hover {text-decoration: underline;}

And In Overall_Header search for
Code:
</head>
And Before It Add This Scripts
Spoiler:
Code:
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
   
$("ul#topnav li").hover(function() { //Hover over event on list item
   $(this).css({ 'background' : '#1376c9 url(http://www.sohtanaka.com/web-design/examples/horizontal-subnav/topnav_active.gif) repeat-x'}); //Add background color + image on hovered list item
   $(this).find("span").show(); //Show the subnav
} , function() { //on hover out...
   $(this).css({ 'background' : 'none'}); //Ditch the background
   $(this).find("span").hide(); //Hide the subnav
});
   
});
</script>

And Now Add This HTML
Spoiler:
Code:
    <ul id="topnav">
        <li><a href="#">Main Link</a></li>
        <li>

            <a href="#">Main Link</a>
            <span>
                <a href="#">Sub Link</a> |
                <a href="#">Sub Link</a> |
                <a href="#">Sub Link</a>
            </span>
        </li>

        <li>
            <a href="#">Main Link</a>
            <span>
                <a href="#">Sub Link</a> |
                <a href="#">Sub Link</a> |
                <a href="#">Sub Link</a>
            </span>

        </li>
        <li>
            <a href="#">Main Link</a>
            <span>
                <a href="#">Sub Link</a> |
                <a href="#">Sub Link</a> |
                <a href="#">Sub Link</a> |
                <a href="#">Sub Link</a> |
                <a href="#">Sub Link</a>

            </span>
        </li>
        <li><a href="#">Main Link</a></li>
    </ul>

Enjoy xD




http://ultragamerz.forumotion.net/

Blue.

avatar

Where do i put that html?

In the overal header?

ArChKnIgHt

avatar

in overall_header search for
Code:
                  <div id="pun-navlinks">
                     <ul class="clearfix">
                        <li>{GENERATED_NAV_BAR}</li>
                     </ul>
                  </div>
And Replace It With
Spoiler:
Code:
<ul id="topnav">
        <li><a href="#">Main Link</a></li>
        <li>

            <a href="#">Main Link</a>
            <span>
                <a href="#">Sub Link</a> |
                <a href="#">Sub Link</a> |
                <a href="#">Sub Link</a>
            </span>
        </li>

        <li>
            <a href="#">Main Link</a>
            <span>
                <a href="#">Sub Link</a> |
                <a href="#">Sub Link</a> |
                <a href="#">Sub Link</a>
            </span>

        </li>
        <li>
            <a href="#">Main Link</a>
            <span>
                <a href="#">Sub Link</a> |
                <a href="#">Sub Link</a> |
                <a href="#">Sub Link</a> |
                <a href="#">Sub Link</a> |
                <a href="#">Sub Link</a>

            </span>
        </li>
        <li><a href="#">Main Link</a></li>
        <!-- BEGIN switch_user_logged_out -->
        <li><a href="/register">Register</a></li>
        <li><a href="/login">Login</a></li>
        <!-- END switch_user_logged_out -->
        <!-- BEGIN switch_user_logged_in -->
        <li><a href="/profile?mode=editprofile">Profile</a></li>
        <li><a href="/privmsg">Mailbox</a></li>
        <li><a href="/login?logout">Sign Out</a></li>
        <!-- END switch_user_logged_in -->
    </ul>




http://ultragamerz.forumotion.net/

Sponsored content


View previous topic View next topic Back to top  Message [Page 1 of 1]

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

.

Forumotion.com | © PunBB | Free forum support | Contact | Report an abuse | Forumotion.com.