Jump to content

Welcome to our forums!

Sign In or Register to gain full access to our forums. By registering with us, you'll be able to discuss, share and private message with other members of our community.

Toggle shoutbox Shoutbox Open the Shoutbox in a popup

@  frode : (12 January 2017 - 09:33 PM)

Hi! New here :) Anyone knows how to acc3s$ jaypeedigital?

@  karim2017 : (06 January 2017 - 09:18 PM)

Hello everybody happy new year can u help me finding this book : Heinrich's Principles and practice of dialysis 5th ed thank you very much

@  RedCat : (01 January 2017 - 08:57 AM)

where r u guys?

@  RedCat : (01 January 2017 - 08:56 AM)

Happy new Year 2017..

@  motif : (07 November 2016 - 12:52 PM)

:drunk:

@  john smith : (06 November 2016 - 10:41 PM)

color atlas of pharmacology

@  motif : (25 October 2016 - 04:19 PM)

i'll take this oppurtunity to thanks everyone for i realised one dream because of many good people like you helping..

@  motif : (25 October 2016 - 04:02 PM)

i was addicted to upload books here..

@  motif : (25 October 2016 - 04:01 PM)

hi everyone , i am nobody here but i was here long time back ...

@  motif : (25 October 2016 - 04:01 PM)

oh my god i just remembered ...

@  preetshardoc : (13 August 2016 - 07:28 PM)

yes, jaypeedigital has recently changed their site.....does anyone know how to download pdf from it now

@  chapikamed : (26 July 2016 - 04:05 PM)

Operative Orthopaedics: The Stanmore Guide

@  goodforamen : (28 June 2016 - 11:49 AM)

I uploaded link of 20th edition of Sabiston Textbook of Surgery and 12th edition of Maingot's Abdominal Operations in my comment in their last editions

@  drhawk : (25 May 2016 - 12:16 AM)

Hello everyone hope all are great

@  poket : (05 May 2016 - 07:59 PM)

Hi Permediki :icon_lol:

@  Permediki : (05 May 2016 - 04:39 PM)

Hiyas. Everyone seems to be slept :icon_ben_hypno:

@  poket : (02 April 2016 - 07:54 PM)

Hello! :icon_lol:

@  zool : (19 February 2016 - 12:03 PM)

hi. does anyone knows a website with med. books translated in greek? thanbk you alot

@  yosoy : (13 February 2016 - 06:31 PM)

I'm sorry is MKSAP16 in PDF. Thank you

@  yosoy : (13 February 2016 - 06:29 PM)

Good afternoon. Please upload the bestseller MKSAP 16 in 'D.F. Thank you


Photo
- - - - -

Sexy Dropdown Menu W/ Jquery & Css-Modified For Mybb



  • Please log in to reply
7 replies to this topic

#1 Storm Rider

Storm Rider

    Hierophant

  • Administrator
  • 3,610 posts

Posted 15 November 2010 - 01:03 AM

Original Tutorial:

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


Modified for MYBB 1.6



HERE ARE THE STEPS:

1. UPLOAD IMAGES FROM ATTACHEMENT IN IMAGES FOLDER= images/

2. GO TO ACP: THEME: YOUR THEME: GLOBALL.CSS




ul.topnav {
list-style: none;
padding: 0 20px;
margin: 0;
float: left;
width: 100%;
background: #222;
font-size: 1.2em;
background: url(images/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(images/topnav_hover.gif) no-repeat center top;
}
ul.topnav li span { /*--Drop down trigger styles--*/
width: 17px;
height: 35px;
float: left;
background: url(images/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(images/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(dropdown_linkbg.gif) no-repeat 10px center;
}



3. GO TO YOUR THEME TEMPLATES:
CHOOSE HEADER TEMPLATE

Here we'll put jquery script and links

jquery (put this at the very beginning of your header)



Code:
<script type="text/javascript">
$.noConflict();
</script>
<script type="text/javascript">
jQuery(document).ready(function(){


jQuery("ul.subnav").parent().append("<span></span>"); //Only shows drop down trigger when js is enabled - Adds empty span tag after ul.subnav


jQuery("ul.topnav li a").hover(function() { //When trigger is clicked...


//Following events are applied to the subnav itself (moving subnav up and down)
jQuery(this).parent().find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on click


jQuery(this).parent().hover(function() {
}, function(){
jQuery(this).parent().find("ul.subnav").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up
});


//Following events are applied to the trigger (Hover events for the trigger)
}).hover(function() {
jQuery(this).addClass("subhover"); //On hover over, add class "subhover"
}, function(){ //On Hover Out
jQuery(this).removeClass("subhover"); //On hover out, remove class "subhover"
});


});
</script>



and put these links (name them and link them as you want) somwehere after logo



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>
</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>
</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>




You can change things in CSS as you like (color, background, size etc)


download

Hidden Content
You'll be able to see the hidden content once you reply to this topic.

  • 2

#2 envira

envira

    Junior

  • Members
  • 11 posts

Posted 15 January 2012 - 04:24 PM

why cant i see all these ????
  • 0

#3 GodFather

GodFather

    Veteran

  • Administrator
  • 2,703 posts

Posted 15 January 2012 - 09:31 PM

why cant i see all these ????

Thread has been destroyed while moving to new forum
Wait Storm Rider for any questions
  • 2

#4 MadonnaX

MadonnaX

    Newbie

  • Members
  • 1 posts

Posted 16 September 2013 - 01:46 AM

nice tutorial


  • 0

#5 Amokossi

Amokossi

    Newbie

  • Members
  • 1 posts

Posted 24 October 2014 - 07:43 PM

hm..will try


  • 0

#6 Piero41

Piero41

    Newbie

  • Members
  • 1 posts

Posted 11 June 2015 - 08:06 PM

will try it :) ty


  • 0

#7 vintagedaddyo

vintagedaddyo

    Newbie

  • Members
  • 1 posts

Posted 26 November 2016 - 12:01 AM

interesting implementation :detective: 404 on the dd mirrors 1 & 2


Edited by vintagedaddyo, 26 November 2016 - 12:03 AM.

  • 0

#8 Grumpykitty

Grumpykitty

    Newbie

  • Members
  • 1 posts

Posted 05 January 2017 - 03:20 PM

Nice just what I was looking for. Hope this works for 1.8.x mybb.


  • 0





Also tagged with one or more of these keywords: