Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 1 of 1
  1. #1
    New Coder
    Join Date
    Dec 2011
    Thanked 0 Times in 0 Posts

    Adding a flyout submenu to existing vertical drop menu

    I am tryign to add a flyout (to the right) submenu to my existing vertical drop down menu and im pretty clueless how i can accomplish this.

    my current attempt is not working, here is the code:

    <!--drop menu js-->
    <script type="text/javascript">
    // Copyright 2006-2007 javascript-array.com
    var timeout	= 500;
    var closetimer	= 0;
    var ddmenuitem	= 0;
    // open hidden layer
    function mopen(id)
    	// cancel close timer
    	// close old layer
    	if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
    	// get new layer and show it
    	ddmenuitem = document.getElementById(id);
    	ddmenuitem.style.visibility = 'visible';
    // close showed layer
    function mclose()
    	if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
    // go close timer
    function mclosetime()
    	closetimer = window.setTimeout(mclose, timeout);
    // cancel close timer
    function mcancelclosetime()
    		closetimer = null;
    // close layer when click-out
    document.onclick = mclose; 
     <!--end drop menu js-->
    <div class="wrapper">
    					<ul id="menu">
    						<li id="menu_active"><a href="index.html">home</a></li>
    						<li><a href="detroitvideoproduction.html" rel="nofollow" onMouseOver="mopen('m1')" onMouseOut="mclosetime(2)">Production</a>
    		<div id="m1" class="prod" onmouseover="mcancelclosetime(2)" onmouseout="mclosetime(3)">
    		<a href="detroitvideoproduction.html" onmouseover="mopen('m6')" onmouseout="mclosetime(2)">Video Production</a>
            <div id="m6" class="subprod" onmouseover="mcancelclosetime(2)" onmouseout="mclosetime(3)">
            <li><a href="#">chicago</a></li>
            <li><a href="#">detroit</a></li>
            <li><a href="#">toledo</a></li>
            <a href="locationsounddetroit.html">Location Sound</a>
    					  <li  onMouseOver="mopen('m2')" onMouseOut="mclosetime(2)"><a href="videoeditingdetroit.html" rel="nofollow">Post Production</a>
    		<div id="m2" class="postprod" onmouseover="mcancelclosetime(2)" onmouseout="mclosetime(3)">
            <a href="videoeditingdetroit.html">Video Editing</a>
            <a href="custommotiongraphicsdetroit.html">Custom Graphics</a>
    					  <li ><a href="demoreel.html" rel="nofollow" onMouseOver="mopen('m3')" onMouseOut="mclosetime(2)">Demo Reel</a>
            <div id="m3" class="demo" onmouseover="mcancelclosetime(2)" onmouseout="mclosetime(3)">
            <a href="demoreel.html">Demo Reel</a>
            <a href="http://www.youtube.com/user/VideoDetroitMI?ob=0">You Tube</a>
            <a href="http://vimeo.com/liveoutloudproductions">Vimeo</a>
        				  <li ><a href="dslrrentalsdetroit.html" rel="nofollow" onMouseOver="mopen('m5')" onMouseOut="mclosetime(2)">Equipment Rentals</a>
        	<div id="m5" class="rent" onmouseover="mcancelclosetime(2)" onmouseout="mclosetime(2)">
        	<a href="dslrrentalsdetroit.html">Camera Rental</a>
        	<a href="lectrosonicsrentalsdetroit.html">Audio Rental</a>
        	<a href="griprentalsdetroit.html">Grip Rental</a>
            <a href="camerasupportdetroit.html">Camera Support</a>
        				  <li ><a href="about.html" onMouseOver="mopen('m4')" onMouseOut="mclosetime(2)">About</a>
        	<div align="center" id="m4" class="us" onmouseover="mcancelclosetime(2)" onmouseout="mclosetime(3)">
    		<a href="about.html">About</a>
        	<a href="contact.html">Contact</a>
    /**<li> tag have float: left; declaration. sumbmenu layer have visibility: hidden; and position: absolute;. Anchor tag set to display: block;
    Everything else is usual decoration:**/
    {	margin: 0;
    	padding: 0;
    	z-index: 20;
    	clear: all;
    #menu li
    {	margin: 0;
    	padding: 0;
    	list-style: none;
    	float: left;
    	font: bold 11px arial}
    #menu li a
    {	display: block;
    	background: #232323;
    	color: #FFF;
    	text-decoration: none
    #menu li a:hover
    {	background: #353535}
    #menu div
    {	position: absolute;
    	visibility: hidden;
    	#menu div a
    		display: block;
    		color: #fff;
    	#menu div a:hover
    	{	background: #353535;
    		color: #FFF}
    .prod { width:150px;}
    .postprod {width:185px;}
    .demo {width: 140px;}
    .rent {width: 200px;}
    .us {width: 111px;}
    /***end drop menu***/
    #menu { float:left; margin-top:25px; padding-left:14px; background:url(images/menu_line.gif) right 0 no-repeat; width:958px; height:70px;}
    #menu li { float:left; padding-left:1px; background:url(images/menu_line.gif) 0 0 no-repeat}
    #menu li a{
    	padding:18px 30px 14px 38px;
     #menu #menu_active a{ padding-top:16px; padding-bottom:28px;}
    /** END NON DROP NAV **/
    known issues:

    The child menu (sub menu) is appearing below the parent item.
    the parent item disappears when the child menu appears
    the child menu does not stay visible when itself or parent item is hovered over
    i suck at life
    Last edited by Tim@DIM; 07-31-2012 at 05:51 PM.


Tags for this Thread

Posting Permissions

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