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

@  Mart123 : (03 October 2019 - 11:42 AM)

how to covert imp files to pdf?

@  Mart123 : (03 October 2019 - 11:41 AM)

imp to pdf

@  Sandy888 : (20 July 2019 - 04:51 PM)

any chance of reviving this forum?

@  kiran315 : (09 June 2019 - 08:00 PM)

Miss this group

@  magoggia : (10 March 2019 - 09:55 PM)

acid base

@  arogyam917 : (11 February 2019 - 05:36 AM)

Herbal treatment for sexual weakness, obesity, hair fall, skin problems, joint problems and all other problems

@  Fortune : (09 July 2018 - 04:44 PM)

best of Luck All old friends

@  medicine2011 : (08 July 2018 - 03:19 PM)

Hello Shina

@  Shina : (08 July 2018 - 02:05 PM)

I miss my friends at here :)

@  Shina : (08 July 2018 - 02:04 PM)

Hello all

@  medicine2011 : (06 July 2018 - 10:15 PM)

We can do all effort for this forum

@  medicine2011 : (06 July 2018 - 10:14 PM)

I hope we can make the forum active as before

@  CalmCode : (06 July 2018 - 09:10 PM)

Admins, Please read new topic in admin section.

@  Sandy888 : (06 July 2018 - 12:04 PM)

Admins ..make a plan to revive the forum..

@  RedCat : (30 June 2018 - 12:23 PM)

Could I help you? :)

@  RedCat : (30 June 2018 - 12:18 PM)

welcomeback

@  RedCat : (30 June 2018 - 12:18 PM)

Hi Dr.RobenX

@  CalmCode : (24 June 2018 - 06:09 PM)

@Storm Rider .. Please Contact me?

@  drhawk : (30 April 2018 - 09:33 PM)

Yes Sandy we need to revive this great forum

@  Sandy888 : (30 April 2018 - 04:04 PM)

what can we do to rejuvenate the forum?


Photo
- - - - -

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



  • Please log in to reply
8 replies to this topic

#1 Storm Rider

Storm Rider

    Hierophant

  • Administrator
  • 3,616 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,705 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

#9 Aquastripe

Aquastripe

    Newbie

  • Members
  • 1 posts

Posted 05 August 2019 - 12:54 AM

Thanks for sharing the tutorial


  • 0





Also tagged with one or more of these keywords: