<
Have a sexy drop down menù
Add a sexy drop down menù - sothanaka
First step
Hello,
This tutorialwill show you how to make a sexy jQuery drop-down menu with triggers.
The full tutorial, by Soh Tanaka, can be found here: http://www.noupe.com/tutorial/drop-down-menu-jquery-css.html
But the big question, which everybody ask -- all the time, is: "How can I append this to my Forumotion board?". This tutorial will describe how to install it into your board.
Step 1: Html
Navigate to your overall_header template.
Find:
.. And replace it with this:
Converted with session brackets by Gansgar15.
We're done with the HTML. Next step!
Step 2: Cascading Style Sheets
Navigate to the CSS section of your board, and add:
Time for the magic.
In overall_header, inside the tag, put:
Time for our last step, AJAX to count the PM's.
First thing
You need to put the image in Private message ... locate in Picture Management
Replace IMAGE HERE with your private message image you had
Stuck? Shout out in the Web Design section.
Credits:
shadowz_au - concept
Gangstar15 - log in/out
Saxaca - PM parsing AJAX
Written by shadowz_au • Improved by Saxaca
This tutorialwill show you how to make a sexy jQuery drop-down menu with triggers.
The full tutorial, by Soh Tanaka, can be found here: http://www.noupe.com/tutorial/drop-down-menu-jquery-css.html
But the big question, which everybody ask -- all the time, is: "How can I append this to my Forumotion board?". This tutorial will describe how to install it into your board.
Step 1: Html
Navigate to your overall_header template.
Find:
- Code: Select Content
<ul class="clearfix">
<li>{GENERATED_NAV_BAR}</li>
</ul>
.. And replace it with this:
- Code: Select Content
<ul class="topnav">
<li><a href="forum">Home</a></li>
<li>
<a href="faq">Faq</a>
<ul class="subnav">
<li><a href="#">test1</a></li>
<li><a href="#">test2</a></li>
</ul>
</li>
<li>
<a href="memberlist">Memberlist</a>
<ul class="subnav">
<li><a href="#">test3</a></li>
<li><a href="#">test4</a></li>
</ul>
</li>
<!-- BEGIN switch_user_logged_in -->
<li><a href="/groups">Usergroups</a></li>
<li><a href="/profile?mode=editprofile">Profile</a></li>
<li><a href="/privmsg?folder=inbox" class="p-m">Mailbox</a></li>
<li><a href="/login?logout">Logout</a></li>
<!-- END switch_user_logged_in -->
<!-- BEGIN switch_user_logged_out -->
<li><a href="/register">Register</a></li>
<li><a href="/login">Login</a></li>
<!-- END switch_user_logged_out -->
</ul>
Converted with session brackets by Gansgar15.
We're done with the HTML. Next step!
Step 2: Cascading Style Sheets
Navigate to the CSS section of your board, and add:
- Code: Select Content
#pun-head #pun-navlinks {
list-style: none;
padding: 0 20px;
margin: 0;
float: left;
width: 842px;
background: #222;
font-size: 1.0em;
background: url('http://www.sohtanaka.com/web-design/examples/drop-down-menu/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('http://www.sohtanaka.com/web-design/examples/drop-down-menu/topnav_hover.gif') no-repeat center top;
}
ul.topnav li span { /*--Drop down trigger styles--*/
width: 17px;
height: 35px;
float: left;
background: url('http://www.sohtanaka.com/web-design/examples/drop-down-menu/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('http://www.sohtanaka.com/web-design/examples/drop-down-menu/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('http://www.sohtanaka.com/web-design/examples/drop-down-menu/dropdown_linkbg.gif') no-repeat 10px center;
}
Time for the magic.
In overall_header, inside the tag, put:
- Code: Select Content
<script type="text/javascript" src="http://near-reality123123123.webs.com/bar.js"></script>
Time for our last step, AJAX to count the PM's.
First thing
You need to put the image in Private message ... locate in Picture Management
- Code: Select Content
$.ajax({
url: '/privmsg?folder=inbox',
success: function(ajax) {
count = $('img[src="IMAGE HERE"]', ajax).length;
if (count < 1) {
$('a.mailbox').html('Messages');
}
else {
$('a.mailbox').html('Messages ('+count+')');
}
}
});
Replace IMAGE HERE with your private message image you had
Stuck? Shout out in the Web Design section.
Credits:
shadowz_au - concept
Gangstar15 - log in/out
Saxaca - PM parsing AJAX
Written by shadowz_au • Improved by Saxaca
You have completed the tutorial succesful!
If you have some problems with this tutorial contact us in the support section
If you have some problems with this tutorial contact us in the support section