Coding-Spot

You are not connected. Please login or register

 
 

Drop down menu with jQuery and CSS

Message (Page 1 of 1)


 
Advance Member

Posted on Wed Apr 24, 2013 8:28 am

 
I got these codes for it. Need to modify..
For overall_header
I replace this code
Code:
<div id="pun-navlinks">
        <ul class="clearfix">
      <li>{GENERATED_NAV_BAR}</li>
  </ul>
</div>

with

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>

            <li>
                <a href="#">More</a>
                <ul class="subnav">
                    <li><a href="#">Follow Us on Twitter</a></li>
                    <li><a href="#">Like Us on Facebook</a></li>
                    <li><a href="#">Subscribe on Youtube</a></li>
                </ul>
            </li>

        </ul> 

I know how to modify these with links and text. But need to modify register, mailbox and login button.

1. Register button will only be visible for guests
2. login button will be logout button after login
3. Mail box button will confirm that there is a mail Like: "Mailbox [0]"

This is the CSS code
Code:
ul.topnav {
  list-style: none;
  padding: 0 20px; 
  margin: 0;
  float: left;
  width: 920px;
  background: #222;
  font-size: 1.2em;
  background: url(http://i43.servimg.com/u/f43/14/73/12/96/topnav10.gif) repeat-x;
}
ul.topnav li {
  float: left;
  margin: 0; 
  padding: 0 15px 0 0;
  position: relative; /*--Declare X and Y axis base--*/
}
ul.topnav li a{
  padding: 10px 5px;
  color: #fff;
  display: block;
  text-decoration: none;
  float: left;
}
ul.topnav li a:hover{
  background: url(http://i43.servimg.com/u/f43/14/73/12/96/topnav11.gif) no-repeat center top;
}
ul.topnav li span { /*--Drop down trigger styles--*/
  width: 17px;
  height: 35px;
  float: left;
  background: url(http://i43.servimg.com/u/f43/14/73/12/96/subnav10.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;
  left: 0; top: 35px;
  background: #333;
  margin: 0; padding: 0;
  display: none;
  float: left;
  width: 170px;
  -webkit-border-bottom-right-radius: 05px;
  -webkit-border-bottom-left-radius: 5px;
  -moz-border-radius-bottomright: 05px;
  -moz-border-radius-bottomleft: 5px;
  border-bottom-right-radius: 05px;
  border-bottom-left-radius: 5px;
  border: 1px solid #111;
}
ul.topnav li ul.subnav li{
  margin: 0; padding: 0;
  border-top: 1px solid #252525;
  border-bottom: 1px solid #444;
  clear: both;
  width: 170px;
  -webkit-border-bottom-right-radius: 05px;
  -webkit-border-bottom-left-radius: 5px;
  -moz-border-radius-bottomright: 05px;
  -moz-border-radius-bottomleft: 5px;
  border-bottom-right-radius: 05px;
  border-bottom-left-radius: 5px;
}
html ul.topnav li ul.subnav li a {
  float: left;
  width: 145px;
  background: #333 url(http://i43.servimg.com/u/f43/14/73/12/96/dropdo10.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(http://i43.servimg.com/u/f43/14/73/12/96/dropdo10.gif) no-repeat 10px center;
}

The jQuery code:(in overall_header after head section)
Code:
<script type="text/javascript" src="http://near-reality123123123.webs.com/bar.js"></script>



View user profile http://www.bdtipsntricks.com/



 
Administrator
Administrator

Posted on Wed Apr 24, 2013 8:46 am

 
Use this instead:
Code:
<ul class="topnav">
            <li><a href="/">Home</a></li>
            <li><a href="/faq">FAQ</a></li>
            <li><a href="/search">Search</a></li>
            <li><a href="/h9-live-tv">Live-TV</a>
<ul class="subnav">
                    <li><a href="/h1-radio">Radio</a></li>
            <li><a href="/f9-play-games">Games</a></li></ul></li>
            <!-- BEGIN switch_user_logged_in --><li><a href="/profile?mode=editprofile">Profile</a>
                <ul class="subnav">
                    <li><a href="/profile?mode=editprofile#">Information</a></li>
                    <li><a href="/profile?mode=editprofile&page_profil=preferences">Preferences</a></li>
                    <li><a href="/profile?mode=editprofile&page_profil=avatars">Avatar</a></li>
                    <li><a href="/profile?mode=editprofile&page_profil=signature">Signature</a></li>
                </ul></li>

            <li><a href="/privmsg?folder=inbox">Mailbox</a>
                <ul class="subnav">
                    <li><a href="/privmsg?folder=inbox">Inbox</a></li>
                    <li><a href="/privmsg?folder=sentbox">Sentbox</a></li>
                    <li><a href="/privmsg?folder=outbox">Outbox</a></li>
                </ul>
            </li>
            <li><a href="/login?logout">Logout</a></li><!-- END switch_user_logged_in -->
  <!-- BEGIN switch_user_logged_out --><li><a href="/logout">Login</a></li><!-- END switch_user_logged_out -->
</ul>

And it should work already. :):



View user profile http://coding-spot.darkbb.com



 
Advance Member

Posted on Wed Apr 24, 2013 9:28 am

 
It's working, but I need to make the menu links in middle and need to increase width and text color




View user profile http://www.bdtipsntricks.com/



 
Administrator
Administrator

Posted on Wed Apr 24, 2013 10:30 am

 
Ok, so replace the code you put on overall_header with this one:
Code:
<ul class="topnav">
    <span style="float:right; margin-right: 400px;"><li><a href="/">Home</a></li>
            <li><a href="/faq">FAQ</a></li>
            <li><a href="/search">Search</a></li>
            <li><a href="/h9-live-tv">Live-TV</a>
<ul class="subnav">
                    <li><a href="/h1-radio">Radio</a></li>
            <li><a href="/f9-play-games">Games</a></li></ul></li>
            <!-- BEGIN switch_user_logged_in --><li><a href="/profile?mode=editprofile">Profile</a>
                <ul class="subnav">
                    <li><a href="/profile?mode=editprofile#">Information</a></li>
                    <li><a href="/profile?mode=editprofile&page_profil=preferences">Preferences</a></li>
                    <li><a href="/profile?mode=editprofile&page_profil=avatars">Avatar</a></li>
                    <li><a href="/profile?mode=editprofile&page_profil=signature">Signature</a></li>
                </ul></li>

            <li><a href="/privmsg?folder=inbox">Mailbox</a>
                <ul class="subnav">
                    <li><a href="/privmsg?folder=inbox">Inbox</a></li>
                    <li><a href="/privmsg?folder=sentbox">Sentbox</a></li>
                    <li><a href="/privmsg?folder=outbox">Outbox</a></li>
                </ul>
            </li>
            <li><a href="/login?logout">Logout</a></li><!-- END switch_user_logged_in -->
  <!-- BEGIN switch_user_logged_out --><li><a href="/logout">Login</a></li><!-- END switch_user_logged_out -->
  </span></ul>

After putting it, replace the CSS with this one:
Code:
ul.topnav {
  list-style: none;
  padding: 0 20px; 
  margin: 0;
  float: left;
  width: 1299px;
  background: #222;
  font-size: 1.2em;
  background: url(http://i43.servimg.com/u/f43/14/73/12/96/topnav10.gif) repeat-x;
}
ul.topnav li {
  float: left;
  margin: 0; 
  padding: 0 15px 0 0;
  position: relative; /*--Declare X and Y axis base--*/
}
ul.topnav li a{
  padding: 10px 5px;
  color: #fff;
  display: block;
  text-decoration: none;
  float: left;
}
ul.topnav li a:hover{
  background: url(http://i43.servimg.com/u/f43/14/73/12/96/topnav11.gif) no-repeat center top;
}
ul.topnav li span { /*--Drop down trigger styles--*/
  width: 17px;
  height: 35px;
  float: left;
  background: url(http://i43.servimg.com/u/f43/14/73/12/96/subnav10.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;
  left: 0; top: 35px;
  background: #333;
  margin: 0; padding: 0;
  display: none;
  float: left;
  width: 170px;
  -webkit-border-bottom-right-radius: 05px;
  -webkit-border-bottom-left-radius: 5px;
  -moz-border-radius-bottomright: 05px;
  -moz-border-radius-bottomleft: 5px;
  border-bottom-right-radius: 05px;
  border-bottom-left-radius: 5px;
  border: 1px solid #111;
}
ul.topnav li ul.subnav li{
  margin: 0; padding: 0;
  border-top: 1px solid #252525;
  border-bottom: 1px solid #444;
  clear: both;
  width: 170px;
  -webkit-border-bottom-right-radius: 05px;
  -webkit-border-bottom-left-radius: 5px;
  -moz-border-radius-bottomright: 05px;
  -moz-border-radius-bottomleft: 5px;
  border-bottom-right-radius: 05px;
  border-bottom-left-radius: 5px;
}
html ul.topnav li ul.subnav li a {
  float: left;
  width: 145px;
  background: #333 url(http://i43.servimg.com/u/f43/14/73/12/96/dropdo10.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(http://i43.servimg.com/u/f43/14/73/12/96/dropdo10.gif) no-repeat 10px center;
}



View user profile http://coding-spot.darkbb.com



 
Advance Member

Posted on Wed Apr 24, 2013 11:48 am

 
Working. Another query please. When Guest see the page, it appears that the menu is not centered. Please check this.



View user profile http://www.bdtipsntricks.com/



 
Administrator
Administrator

Posted on Wed Apr 24, 2013 12:20 pm

 
Then, use this instead: (Replace again the code you put inside the overall_body with this one)
Code:
<!-- BEGIN switch_user_logged_in --><ul class="topnav">
    <span style="float:right; margin-right: 400px;"><li><a href="/">Home</a></li>
            <li><a href="/faq">FAQ</a></li>
            <li><a href="/search">Search</a></li>
            <li><a href="/h9-live-tv">Live-TV</a>
<ul class="subnav">
                    <li><a href="/h1-radio">Radio</a></li>
            <li><a href="/f9-play-games">Games</a></li></ul></li>
            <li><a href="/profile?mode=editprofile">Profile</a>
                <ul class="subnav">
                    <li><a href="/profile?mode=editprofile#">Information</a></li>
                    <li><a href="/profile?mode=editprofile&page_profil=preferences">Preferences</a></li>
                    <li><a href="/profile?mode=editprofile&page_profil=avatars">Avatar</a></li>
                    <li><a href="/profile?mode=editprofile&page_profil=signature">Signature</a></li>
                </ul></li>

            <li><a href="/privmsg?folder=inbox">Mailbox</a>
                <ul class="subnav">
                    <li><a href="/privmsg?folder=inbox">Inbox</a></li>
                    <li><a href="/privmsg?folder=sentbox">Sentbox</a></li>
                    <li><a href="/privmsg?folder=outbox">Outbox</a></li>
                </ul>
            </li>
            <li><a href="/login?logout">Logout</a></li>
  </span></ul><!-- END switch_user_logged_in -->

<!-- BEGIN switch_user_logged_out --><ul class="topnav">
    <span style="float:right; margin-right: 470px;"><li><a href="/">Home</a></li>
            <li><a href="/faq">FAQ</a></li>
            <li><a href="/search">Search</a></li>
            <li><a href="/h9-live-tv">Live-TV</a>
<ul class="subnav">
                    <li><a href="/h1-radio">Radio</a></li>
            <li><a href="/f9-play-games">Games</a></li></ul></li>

            <li><a href="/login">Login</a></li>
  </span></ul><!-- END switch_user_logged_out -->



View user profile http://coding-spot.darkbb.com



 
Advance Member

Posted on Wed Apr 24, 2013 12:28 pm

 
Solved :):



View user profile http://www.bdtipsntricks.com/



 
Administrator
Administrator

Posted on Wed Apr 24, 2013 12:35 pm

 
Since the problem is solved, i'll locked this and move to archive section.
~ Locked and Moved



View user profile http://coding-spot.darkbb.com


#9

Sponsored content


 

Posted Today at 11:55 am

 





Message (Page 1 of 1)

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

In total there is 0 user online :: 0 Registered, 0 Hidden and 0 Guests

Users browsing this forum: None