SitePoint Sponsor

User Tag List

Results 1 to 19 of 19
  1. #1
    SitePoint Addict
    Join Date
    Jul 2006
    Posts
    377
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Megadrop-down Help?

    I wonder if someone could help, or point me in the direction of a tutorial which might be able to?

    I'm after a drop down, well more a hover over.

    But it need it to be the width of the site regardless, when it appears on hover over..

    The best example i can find is the asos site.

    I would need mine to be a full width of the site, like the outlet and kids buttons but say 900wide. A normal div which can have any style within it not necessarily a list navigation.

    Can it be done? I can only find normal large drop downs which grow out from aligned left, i need it just to be site width below the navigation.

    I'm not having much luck at the moment

  2. #2
    SitePoint Guru
    Join Date
    Sep 2008
    Location
    Dubai
    Posts
    971
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    try this jquery plguin, you will need to style and position the menu the way you want it look, this script will show and hide the menu for you.

    Code:
    //<div id="me" style="width:200px; height:30px; margin:100px 0 0 100px; background:#36C">
    //	<div class="title">KID WEARS</div>
    //	<div class="menu" style="background:#CCC;position:absolute;display:none;z-index:200;">
    //		<div>Some thing to show 1</div>
    //		<div>Some thing to show 2</div>
    //		<div>Some thing to show 3</div>
    //		<div>Some thing to show 4</div>
    //		<div>Some thing to show 5</div>
    //	</div>
    //</div>
    
    //$(function(){
    //	$('#me').dropDown({
    //		hover:true,
    //		menu:'.menu',
    //		title:'.title'
    //	});
    //});
    
    
    (function($){
    	$.fn.dropDown = function(options){
    		var defaults = {
    			menu:'',
    			hover:false,
    			click:false,
    			animate:false,
    			animateTimout:'',
    			title:'',
    			Click:function(){}
    		},
    		settings = $.extend({},defaults, options);
    		return this.each(function(){
    			var $this= $(this);
    			$this.hover(function(){
    				$(settings.menu).show();	
    			}, function(){	
    				$(settings.menu).hide();
    			});
    			var mi = $(settings.menu).children();
    				mi.click(function(e){
    				var text = $(e.target).text();// or var text = $(this).text();
    				$(settings.title).text(text);
    				$(settings.menu).hide();
    				//call back function starts here
    				settings.Click.call(this);
    			});
    		});
    	}
    })(jQuery);

  3. #3
    SitePoint Addict
    Join Date
    Jul 2006
    Posts
    377
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Perfect thank you Forest

    If i wanted it to work across a few buttons with corresponding drop downs particular for each button, how i would i add them to it, something like this?
    Code JavaScript:
     
    $('#me,#me2').dropDown({
    		hover:true,
    		menu:'.menu,.menu2',
    		title:'.title',
    		placement:true
    	});
    });

    Thanks again

  4. #4
    SitePoint Guru
    Join Date
    Sep 2008
    Location
    Dubai
    Posts
    971
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No, call it like this
    Code:
    $(function(){
    	$('#me1').dropDown(menu:'.menu1');
        	$('#me2').dropDown(menu:'.menu2');
    	$('#me3').dropDown(menu:'.menu3');
    	$('#me4').dropDown(menu:'.menu4');
    });
    I've shortened plugin a bit just enough for your need, no bloated stuffs. So, use the below code instead of the previous code I gave you

    Code:
    //<div id="me" style="width:200px; height:30px; margin:100px 0 0 100px; background:#36C">
    //	<div class="title">Kid wears</div>
    //	<div class="menu" style="background:#CCC;position:absolute;display:none;z-index:200;">
    //		<div>Some thing to show 1</div>
    //		<div>Some thing to show 2</div>
    //		<div>Some thing to show 3</div>
    //		<div>Some thing to show 4</div>
    //		<div>Some thing to show 5</div>
    //	</div>
    //</div>
    
    //$(function(){
    //	$('#me').dropDown(menu:'.menu');
    //});
    
    
    (function($){
    	$.fn.dropDown = function(options){
    		var defaults = {
    			menu:''
    		},
    		settings = $.extend({},defaults, options);
    		return this.each(function(){
    			var $this= $(this);
    			$this.hover(function(){
    				$(settings.menu).show();	
    			}, function(){	
    				$(settings.menu).hide();
    			});
    		});
    	}
    })(jQuery);

  5. #5
    SitePoint Addict
    Join Date
    Jul 2006
    Posts
    377
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks again forest but its not allowing me to stay on the newly appeared layer, is this possible?

    It just flickers.

    This layer will have links on so you need to be able to hover over, make box appear and then move mouse around box using it until you go out of it again...

    That make sense and possible?

    Here is my code which i'm not having much luck with, it appears but doesn't stay when your within it... I used your older code as well, see if it was that...
    Code HTML4Strict:
     
    <script type="text/javascript">
    $(function(){
    	$('li#sub-one"').dropDown({hover:true,menu:'.guitar-course'});
    });
     
     
    </script>
     
    <script type="text/javascript">
    (function($){
    	$.fn.dropDown = function(options){
    		var defaults = {
    			menu:'',
    			hover:true,
    			click:false,
    			animate:false,
    			animateTimout:'true',
    			title:'',
    			Click:function(){}
    		},
    		settings = $.extend({},defaults, options);
    		return this.each(function(){
    			var $this= $(this);
    			$this.hover(function(){
    				$(settings.menu).show();	
    			}, function(){	
    				$(settings.menu).hide();
    			});
    			var mi = $(settings.menu).children();
    				mi.click(function(e){
    				var text = $(e.target).text();// or var text = $(this).text();
    				$(settings.title).text(text);
    				$(settings.menu).hide();
    				//call back function starts here
    				settings.Click.call(this);
    			});
    		});
    	}
    })(jQuery);</script>
     
     
    <ul id="sub-nav">
     
    		<li id="sub-one"> <a href="#">Guitar Courses</a></li>
    		<li> <a href="#">Bass Courses</a></li>
    		<li> <a href="#">Drum Courses</a></li>
    		<li> <a href="#">Vocal Courses</a></li>
    		<li> <a href="#">Songwriting Courses</a></li>
    		<li> <a href="#">Specialist Courses</a></li>
    		</ul>
     
     
     
    	<div class="guitar-course">test hover box</div>

  6. #6
    SitePoint Guru
    Join Date
    Sep 2008
    Location
    Dubai
    Posts
    971
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry, the code I previously gave you missing the curly braces {}.

    It should be $('#me').dropDown({menu:'.menu'});

    Not $('#me').dropDown(menu:'.menu');

    I don't know how come you manage run the script with the wrong code. Anyway let's focus on your current problem. I think you got the html wrong.

    Can you post your entire html page ?

  7. #7
    SitePoint Addict
    Join Date
    Jul 2006
    Posts
    377
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    I've posted above and here is the css for the panel that appears.

    The buttons is just a normal link..

    Code CSS:
    .guitar-course{display:none;
    	background-color:red;
    	height:250px;
    	position:absolute;
    	top:218px;
    	width:900px;left:0;z-index:200;
    	}

    Thanks again

  8. #8
    SitePoint Guru
    Join Date
    Sep 2008
    Location
    Dubai
    Posts
    971
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You didn't code the html incorrectly. The menu has to be inside the containing element which will initiate the drop down. Your menu is sub-nav not guitar course.

    I rewrite the code for you, adding some essential CSS. try it!

    Code:
    <style type="text/css">
    * {
    	/*reset padding and margin of every element, the ul and li have default padding and margin values, giving undesired
    	layout*/
    	padding:0;
    	margin:0;		
    }
    #sub-nav{display:none;
        background-color:red;
        height:250px;
        position:absolute;
        width:900px;
    	z-index:200;
        }
    .container_1 {
    	position:relative; /*this line is important, do not alter */
    	width:200px;
    	height:30px;
    	line-height:30px;
    	margin:100px 0 0 100px;
    	background:#36C;
    }
    
    
    </style>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
    (function($){
    	$.fn.dropDown = function(options){
    		var defaults = {
    			menu:''
    		},
    		settings = $.extend({},defaults, options);
    		return this.each(function(){
    			var $this= $(this);
    			$this.hover(function(){
    				$(settings.menu).show();	
    			}, function(){	
    				$(settings.menu).hide();
    			});
    		});
    	}
    })(jQuery);
    
    $(function(){
        $('.container_1').dropDown({menu:'#sub-nav'});
    });
    </script>
    
    <div class="container_1" >
    	<div>test hover box</div>
        <ul id="sub-nav">
            <li id="sub-one"> <a href="#">Guitar Courses</a></li>
            <li> <a href="#">Bass Courses</a></li>
            <li> <a href="#">Drum Courses</a></li>
            <li> <a href="#">Vocal Courses</a></li>
            <li> <a href="#">Songwriting Courses</a></li>
            <li> <a href="#">Specialist Courses</a></li>
        </ul>
    </div>

  9. #9
    SitePoint Addict
    Join Date
    Jul 2006
    Posts
    377
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah perfect thank you forest.

    I see how it works now, thanks.

    I've put the layer as a span inside the li tag, as i need the link to be a list navigation. Each button showing a different layer.

    Like so..
    Code HTML4Strict:
    <ul id="sub-nav">
     
    		<li id="sub-one"> <a href="#">Guitar Courses</a>
    		<span class="guitar-course">test layer</span>
    		</li>

    Thought i would ask on the off chance it can be done.

    When you move the mouse from the button to the layer it goes back to its normal state not its hover state obviously.

    Would there be anyway for it to remain in its hover state whilst you move the mouse around the layer, so you know your still using that button?

    So button black usually, hover over turns red and layer appears, move into layer button remains red rather than currently going back to black as the mouse is technically not hovering over the button anymore.

    I doubt its possible but thought i would ask

    Thanks again.

  10. #10
    SitePoint Guru
    Join Date
    Sep 2008
    Location
    Dubai
    Posts
    971
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry, I can't understand what you mean, do you know any websites that have the feature you described ?

  11. #11
    SitePoint Addict
    Join Date
    Jul 2006
    Posts
    377
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Basically the button that once you hover over to make the layer appear turns a different colour, i need it to stay like in that colour state i.e the hover state whilst your in the layer.

    Currently it returns to its normal state once your move the mouse into the layer, so your not sure which buttons your currently viewing the layer for.

    This example does what i mean. When you hover over the button and go into the drop down/layer the original button is still active in the hover state.

    Mine are not

    Hopefully that make sense.

    Its just a visual thing to link each layer and button...

  12. #12
    SitePoint Guru
    Join Date
    Sep 2008
    Location
    Dubai
    Posts
    971
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh I see,

    add this to your css

    div.container_1:hover {
    background:red;
    color:#76D968
    }

  13. #13
    SitePoint Addict
    Join Date
    Jul 2006
    Posts
    377
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Perfect thank you

  14. #14
    SitePoint Addict
    Join Date
    Jul 2006
    Posts
    377
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry to ask again for help but how difficult would it be to add a fade to the hover?

    I notice some jQuery galleries slide shows etc have fades that you can control the speed, possible to add that to your code?

    Thanks again

  15. #15
    SitePoint Guru
    Join Date
    Sep 2008
    Location
    Dubai
    Posts
    971
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    look in the code, change show() to
    Code JavaScript:
    stop(true, true).fadeIn(500)

    And change hide() to
    Code JavaScript:
    stop(true,true).fadeOut(500)

    500 is 500 mili seconds, when hover it takes 500 mili seconds to show the menu completely, and vice versa. You can set whatever seconds you like.

    If you like it slide up slide down instead of fading. Change fadeIn(500) to slideDown(500), and change fadeOut(500) to slideUp(500)

  16. #16
    SitePoint Addict
    Join Date
    Jul 2006
    Posts
    377
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Brilliant thanks

  17. #17
    SitePoint Addict
    Join Date
    Jul 2006
    Posts
    377
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Exclamation

    Hey forest ( or anyone ) can you help...?

    I need the menu you helped me with above to show when you click NOT hover. So you click on the link, it shows the drop down you click again and it closes....?

    Currently i have this...
    Code JavaScript:
     
    <script type="text/javascript">
    (function($){
    	$.fn.dropDown = function(options){
    		var defaults = {
    			menu:''
    		},
    		settings = $.extend({},defaults, options);
    		return this.each(function(){
    			var $this= $(this);
    			$this.hover(function(){
    				$(settings.menu).stop(true, true).fadeIn(200);	
    			}, function(){	
    				$(settings.menu).stop(true,true).fadeOut(100)();
     
    			});
    		});
    	}
    })(jQuery);
     
    $(function(){
        $('li#sub-one').dropDown({menu:'#guitar-course'});
        $('li#sub-two').dropDown({menu:'#bass-course'});
        $('li#sub-three').dropDown({menu:'#drum-course'});
        $('li#sub-four').dropDown({menu:'#vocal-course'});
        $('li#sub-five').dropDown({menu:'#song-course'});
        $('li#sub-six').dropDown({menu:'#specialist-course'});
     
    });
    </script>

    I've changed
    Code JavaScript:
    $this.hover(function()
    to
    Code JavaScript:
    $this.click(function()

    Which works but i cannot get it to close again...

    Anyway if you click elsewhere or the link again it closes it?

    Many thanks for any help...

  18. #18
    SitePoint Addict
    Join Date
    Jul 2006
    Posts
    377
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Exclamation

    I've managed to find this which seems to do what i'm after apart from one flaw...

    Code JavaScript:
     
    $(document).ready(function() {
            var hide = false;
            // Shows the DIV on hover with a fade in
    		$("li#sub-one a").click(function(){          
    		   if (hide) clearTimeout(hide);
                $("#guitar-course").fadeIn();
                // The main nav menu item is assigned the 'active' CSS class
    			$(this).addClass("active");
            }, function() {
                // Fades out the DIV and removes the 'active' class from the main nav menu item
    			hide = setTimeout(function() {$("#guitar-course").fadeOut("fast");});
    			$("li#sub-one a").removeClass("active");
            });
    		// Ensures the DIV displays when your mouse moves away from the main nav menu item
            $("#guitar-course").hover(function(){
                if (hide) clearTimeout(hide);
                $("li#sub-one a").addClass("active");
            }, function() {
                // If your mouse moves out of the displayed hidden DIV, the DIv fades out and removes the 'active' class
    			hide = setTimeout(function() {$("#guitar-course").fadeOut("fast");});
    			$("#guitar-course").stop().fadeIn();
    			$("li#sub-one a").removeClass("active");
            });
     
     
    	});

    After you've left the li#sub-one a link the menu layer below stays there. The layer itself only disappears once you move the mouse into layer and out.

    Meaning if you have a range of navigation each with its own click to show layer, that if you click show layer and DONT move into the layer, you move onto the next link instead, they back up and que, still showing the existing layer...

    Anyone be a big help and give me some advice to fix this...?

    I also have to have all the above for each button

  19. #19
    SitePoint Addict
    Join Date
    Jul 2006
    Posts
    377
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Anyone help me out adding to my last post to close the panel once you leave the main link as well as the actual layer?



Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •