Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New to the CF scene
    Join Date
    Aug 2013
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How to create a dropdown menu similar to xenforo?

    How can I create a dropdown menu similar to xenForo, which will automatically close after 2 seconds?
    I've tried searching but unfortunately couldn't find any proper solution.

    The HTML I used is:
    Code:
    	<ul class="dd_menu">
    		<li><a href="#">Main Menu <span class="smallesttext">&#x25BC;</span></a>
    			<ul>
    				<div align="left">
    					<li><a href="#">Drop Down Link</a></li>
    					<li><a href="#">Drop Down Link</a></li>
    					<li><a href="#">Drop Down Link</a></li>
    					<li><a href="#">Drop Down Link</a></li>
    					<li><a href="#">Drop Down Link</a></li>
    </li>
    				</div>
    			</ul>
    		</li>
    	</ul>
    and the CSS I used is:
    Code:
    .dd_menu {
    background: none;
    padding: 0px;
    margin:0;
    list-style-type:none;
    height:10px;
    border: none;
    font-size: 11px;
    font-family: "Candarab";
    }
    
    .dd_menu li {
    background: none;
    float: left !important;
    height:20px;
    margin-left: 1px;
    margin-top: 4px;
    }
    
    .dd_menu li a {
    padding: 15px 5px;
    display:inline;
    color:#FFF;
    text-decoration:none;
    font:11px arial, verdana, sans-serif;
    }
    
    .dd_menu li:hover a {
    text-decoration:none;
    padding: 15px 5px;
    }
    
    .dd_menu ul {
    position:absolute;
    left:-9999px;
    top:9px;
    list-style-type:none;
    text-decoration: none;
    float: left !important;
    }
    
    .dd_menu li:hover {
    position:relative;
    background:#176093;
    text-decoration: none;
    z-index: 1000;
    }
    
    .dd_menu li:hover ul {
    left:0px;
    top:20px;
    background:lavender;
    padding: 3px 3px;
    border:1px solid grey;
    width:160px;
    text-decoration: none;
    }
    
    .dd_menu li:hover ul li {
    height:18px;
    border:none;
    }
    
    .dd_menu li:hover ul li a {
    height:18px;
    padding:0px;
    display:block;
    font-size:11px;
    width:158px;
    line-height:18px;
    text-indent:5px;
    color:#444;
    background-color:lavender;
    text-decoration:none;
    border:1px solid transparent;
    }
    
    .dd_menu li:hover ul li a:hover {
    height:18px;
    background:silver;
    color:#000;
    float: left;
    border:solid 1px #444;
    }
    But I don't know how to and what code to put to achieve like;
    1. The drop down menu open after 2 seconds if the mouse cursor hovers over the main menu link for 2 seconds.
    2. The drop down closes if the mouse cursor is away from the drop down for 2 seconds.

    The jsfiddle is: http://jsfiddle.net/NgVwU/

    Thanks!

  • #2
    New to the CF scene
    Join Date
    Aug 2013
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Can anyone please reply?

    Thanks!

  • #3
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,575
    Thanks
    23
    Thanked 643 Times in 642 Posts
    This is what it looks like in javascript
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Title of the document</title>
    </head>
    
    <body>
    <div id="everyt" style="width:120px;" onmouseover="sammy();" onmouseout="sam();">
    	<div id="top" onmouseover="setTimeout(appear();">
    	<a href="#">Main Menu <span class="smallesttext">&#x25BC;</span></a>
    	</div>
    
    	<div id="dropd" style="text-align:left;display:none;">
    	<li><a href="#">Drop Down Link</a></li>
    	<li><a href="#">Drop Down Link</a></li>
    	<li><a href="#">Drop Down Link</a></li>
    	<li><a href="#">Drop Down Link</a></li>
    	<li><a href="#">Drop Down Link</a></li>
    	</div>
    </div>
    
    <script type="text/javascript">
    function sammy(){
    	setTimeout(function(){
    		document.getElementById("dropd").style.display = "block";
    	}, 2000);
    }
    function sam(){
    	setTimeout(function(){
    		document.getElementById("dropd").style.display = "none";
    	}, 2000);
    }
    </script>
    </body>
    </html>
    In Jquery
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Title of the document</title>
    </head>
    
    <body>
    <div id="everyt" style="width:120px;">
    	<div id="top" onmouseover="setTimeout(appear();">
    	<a href="#">Main Menu <span class="smallesttext">&#x25BC;</span></a>
    	</div>
    
    	<div id="dropd" style="text-align:left;display:none;">
    	<li><a href="#">Drop Down Link</a></li>
    	<li><a href="#">Drop Down Link</a></li>
    	<li><a href="#">Drop Down Link</a></li>
    	<li><a href="#">Drop Down Link</a></li>
    	<li><a href="#">Drop Down Link</a></li>
    	</div>
    </div>
    
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript">
    $("#top").mouseenter(function(){
    	setTimeout(function(){
    		$("#dropd").css("display","block")
    	}, 2000);
    });
    $("#everyt").mouseleave(function(){
    	setTimeout(function(){
    		$("#dropd").css("display","none")
    	}, 2000);
    });
    </script>
    </body>
    </html>
    But in either I'd put an onclick function in there for impatient people like me.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #4
    New to the CF scene
    Join Date
    Aug 2013
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks, but its opening and closing when we move mouse cursor several times over the main menu. And this issue is for both javascript and jquery versions.

    Please help.

  • #5
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,529
    Thanks
    3
    Thanked 511 Times in 498 Posts
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Title of the document</title>
    </head>
    
    <body>
    <div id="everyt" style="width:120px;background-Color:#FFFFCC;" onmouseover="Open('dropd',true);" onmouseout="Open('dropd',false,2000);">
    	<div id="top" >
    	<a href="#">Main Menu <span class="smallesttext">&#x25BC;</span></a>
    	</div>
    
        <ul id="dropd" style="text-align:left;display:none;list-Style:none;">
    	<li><a href="#">Drop Down Link</a></li>
    	<li><a href="#">Drop Down Link</a></li>
    	<li><a href="#">Drop Down Link</a></li>
    	<li><a href="#">Drop Down Link</a></li>
    	<li><a href="#">Drop Down Link</a></li>
        </ul>
    </div>
    
    <script type="text/javascript">
    function Open(id,ud,ms){
     clearTimeout(Open[id]);
     Open[id]=setTimeout(function(){ document.getElementById(id).style.display = ud?"block":'none'; },ms||10);
    }
    
    </script>
    </body>
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #6
    New to the CF scene
    Join Date
    Aug 2013
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi, I'm using this jQuery version;

    Code:
    <html>
    <head>
    <style>
    .dd_menu {
    background: none;
    padding: 0px;
    margin:0;
    list-style-type:none;
    height:10px;
    border: none;
    font-size: 11px;
    font-family: "Candarab";
    }
    
    .dd_menu li {
    background: none;
    float: left !important;
    height:20px;
    margin-left: 1px;
    margin-top: 4px;
    }
    
    .dd_menu li a {
    padding: 15px 5px;
    display:inline;
    color:#000;
    text-decoration:none;
    font:11px arial, verdana, sans-serif;
    }
    
    .dd_menu li:hover a {
    text-decoration:none;
    padding: 15px 5px;
    }
    
    .dd_menu ul {
    position:absolute;
    left:-9999px;
    top:9px;
    list-style-type:none;
    text-decoration: none;
    float: left !important;
    }
    
    .dd_menu li:hover {
    position:relative;
    background:#176093;
    text-decoration: none;
    z-index: 1000;
    }
    
    .dd_menu li:hover ul {
    left:0px;
    top:20px;
    background:lavender;
    padding: 3px 3px;
    border:1px solid grey;
    width:160px;
    text-decoration: none;
    }
    
    .dd_menu li:hover ul li {
    height:18px;
    border:none;
    }
    
    .dd_menu li:hover ul li a {
    height:18px;
    padding:0px;
    display:block;
    font-size:11px;
    width:158px;
    line-height:18px;
    text-indent:5px;
    color:#444;
    background-color:lavender;
    text-decoration:none;
    border:1px solid transparent;
    }
    
    .dd_menu li:hover ul li a:hover {
    height:18px;
    background:silver;
    color:#000;
    float: left;
    border:solid 1px #444;
    }
    </style>
    </head>
    <body>
    <ul class="dd_menu">
        <li><a href="#">Main Menu <span class="smallesttext">&#x25BC;</span></a>
      <ul>
        <div align="left">
            <li><a href="#">Drop Down Link</a></li>
            <li><a href="#">Drop Down Link</a></li>
            <li><a href="#">Drop Down Link</a></li>
            <li><a href="#">Drop Down Link</a></li>
            <li><a href="#">Drop Down Link</a></li>
        </div>
      </ul>
    </li>
    </ul>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
        $(".dd_menu li a").hover(
            function(){
                $(".dd_menu li ul div li a").hide().fadeIn('slow');
            },
            function(){
            });
        $("ul div li").hover(
            function(){
                $(".dd_menu li ul div li a").show();
            },
            function(){
                ;
            });
        });
    </script>
    </body>
    </html>
    But the issue is when the mouse cursor moves over the drop down links its shows abrupt fading effect. Here is jsfiddle: jsfiddle.net/ZyAm3

    Please help!

  • #7
    New to the CF scene
    Join Date
    Aug 2013
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Also See this jsfiddle: jsfiddle.net/ZyAm3/1 Its updated version of the previous one. Please see the behaviour of the menus. The dropdown links of one menu is fine but the other dropdown links are cluttered one to other. Please help to resolve this too.

  • #8
    New to the CF scene
    Join Date
    Aug 2013
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Please help!

  • #9
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,575
    Thanks
    23
    Thanked 643 Times in 642 Posts
    I am now confused a lot!

    You asked for a delay
    The drop down menu open after 2 seconds if the mouse cursor hovers over the main menu link for 2 seconds.
    I gave you one but you said
    Thanks, but its opening and closing when we move mouse cursor several times over the main menu.
    Which is how it should work.

    Then you use jquery to do a fade in and fade out???????

    OK. Here's a fade in and a fade out, but if you play with the mouse and how it hovers it does come in and goes out. That's how it works. If you want something to stop this behavior look into hoverIntent [I know of no other], but you'll have to play with it.

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Title of the document</title>
    </head>
    
    <body>
    <div id="everyt" style="width:120px;">
    	<div class="top">
    	<a href="#">Main Menu <span class="smallesttext">&#x25BC;</span></a>
    	</div>
    
    	<div class="dropd" style="text-align:left;display:none;">
    	<a href="#">Drop Down Link</a><br />
    	<a href="#">Drop Down Link</a><br />
    	<a href="#">Drop Down Link</a><br />
    	<a href="#">Drop Down Link</a><br />
    	<a href="#">Drop Down Link</a>
    	</div>
    </div>
    
    
    
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript">
    $("#everyt").hover(function(){
    		$(".dropd").fadeIn(2000);
    	},
    	function(){
    		$(".dropd").fadeOut(2000);
    	});
    </script>
    </body>
    </html>
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #10
    New to the CF scene
    Join Date
    Aug 2013
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Jquery

    Hi, if you would accept usage of jQuery there are many plugins on internet. I developed one by myself. If you want I can give you but it uses jQuery!

  • #11
    New to the CF scene
    Join Date
    Aug 2013
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by peixe8 View Post
    Hi, if you would accept usage of jQuery there are many plugins on internet. I developed one by myself. If you want I can give you but it uses jQuery!
    Yes, it would be nice if you share it with me.
    Thank You!


  •  

    Posting Permissions

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