SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    I solve practical problems. bronze trophy
    Michael Morris's Avatar
    Join Date
    Jan 2008
    Location
    Knoxville TN
    Posts
    2,053
    Mentioned
    66 Post(s)
    Tagged
    0 Thread(s)

    Animated drop down menu won't work if relative... Need help with fixing.

    Ok, so this test model works

    Code html:
    <!DOCTYPE html>
    <html>
    	<head>
    		<title>Scroll Menu Test</title>
    		<style type="text/css">
    			* { margin: 0; padding: 0; }
     
    			body { padding: 2em; font-size: 1em;}
     
    			ul { list-style: none; }
    			.dropdown { 
    				overflow: hidden;
    				width: 18em;
    				background: red;
    				top: 100%;
    				left: 0;
    				z-index: 10;
    			}
     
    			.dropdown>div {
    				background: yellow;
    				margin-top: -26em;
    				-webkit-transition: margin-top 1s;
    			}
     
    			.header .nav>ul {
     
    			}
     
    			.header .nav>ul>li {
    				display: inline-block;
    			padding: 1em;
    			background: black;
    			position: relative;
    			}
     
    			.header .dropdown {
    				position: absolute;
    			}
     
    			.header .nav>ul>li:hover .dropdown {
     
    			}
     
    			.header .nav>ul>li:hover .dropdown>div {
    				margin-top: 0;
    			-webkit-transition: margin-top 1s;
    }
     
    			.dropdown li {
    				padding: 1em;
    			}
    		</style>
    	</head>
    	<body>
    		<div class="header">
    			<div class="nav">
    				<ul>
    					<li><a href="#">Menu</a>
    						<div class="dropdown">
    							<div>
    								<ul>
    									<li><a href="#">Option</a></li>
    									<li><a href="#">Option</a></li>
    									<li><a href="#">Option</a></li>
    									<li><a href="#">Option</a></li>
    									<li><a href="#">Option</a></li>
    									<li><a href="#">Option</a></li>
    									<li><a href="#">Option</a></li>
    									<li><a href="#">Option</a></li>
    								</ul>
    							</div>
    						</div>
    					</li>
    				</ul>
    			</div>
    		</div>
    	</body>
    </html>

    Now, my problem is that I can't lock all my menus to the same height, it needs to be dynamic with content. Also, I'm not quite sure why I'm needing to use 26ems for the negative margin to create the animation. I was hoping -100% would work, but it doesn't. Anyone done this effect successfully before?

  2. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,821
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    That is because margins, even vertical ones, are calculated based on the WIDTH of the container. Yeah, that's nuts, but it's true.


    for example, using : .dropdown>div {margin-top: -100%;}
    change .dropdown to { width: 8em; } and see the effect, then try { width: 38em; }

    also note that in order to use top|bottom |left|right and/or z-index you must give the elememt position:relative|absolute|fixed

  3. #3
    I solve practical problems. bronze trophy
    Michael Morris's Avatar
    Join Date
    Jan 2008
    Location
    Knoxville TN
    Posts
    2,053
    Mentioned
    66 Post(s)
    Tagged
    0 Thread(s)
    So, it's impossible then since the width is static and the height dynamic. Is this spec or just a popular bug?

  4. #4
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,821
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    It's the spec and ,yes, it would be impossible using vertical margins.
    You could position the child element out of view, using position:relative, of course the parent would remain open, and you would have to approach this from a completely different angle as far as CSS and HTML are concerned.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I'd just give it a margin bigger than you will ever need. The slight delay will actually enhance the menu and stop it being triggered accidentally when hovering much like the js hover-intent plugin.


    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    ul {
    	margin:0;
    	padding:0;
    	list-style:none;
    }
    #nav { }
    #nav > li {
    	float:left;
    	position:relative;
    }
    #nav > li > a {
    	float:left;
    	padding:0 20px;
    	height:2em;
    	line-height:2em;
    	background:#fcf;
    	border:1px solid #000;
    	margin:0 -1px 0 0;
    }
    #nav a, #nav a:visited {
    	color:#000;
    	text-decoration:none;
    }
    #nav div {
    	position:absolute;
    	top:100%;
    	overflow:hidden;
    }
    #nav ul a {
    	color:#fff;
    	padding:5px 15px;
    	white-space:nowrap;
    }
    #nav ul a { display:block }
    #nav li ul {
    	position:relative;
    	clear:both;
    	background:#333;
    	-webkit-transition:all .5s;
    	-moz-transition:all .5s;
    	-o-transition:all .5s;
    	transition:all .5s;
    	margin-top:-99em;
    }
    #nav li:hover div ul { margin-top:0; }
    </style>
    </head>
    
    <body>
    <ul id="nav">
    		<li><a href="#">Test</a>
    				<div>
    						<ul>
    								<li><a href="#">start Sub nav</a></li>
    								<li><a href="#">Sub nav</a></li>
    								<li><a href="#">Sub nav</a></li>
    								<li><a href="#">Sub nav</a></li>
    								<li><a href="#">Sub nav</a></li>
    								<li><a href="#">Sub nav</a></li>
    								<li><a href="#">Sub nav</a></li>
    								<li><a href="#">Sub nav</a></li>
    								<li><a href="#">Sub nav</a></li>
    								<li><a href="#">Sub nav</a></li>
    								<li><a href="#">Sub nav</a></li>
    						</ul>
    				</div>
    		</li>
    		<li><a href="#">Test</a>
    				<div>
    						<ul>
    								<li><a href="#">start Sub nav</a></li>
    								<li><a href="#">Sub nav</a></li>
    								<li><a href="#">Sub nav</a></li>
    								<li><a href="#">Sub nav</a></li>
    								<li><a href="#">Sub nav</a></li>
    						</ul>
    				</div>
    		</li>
    		<li><a href="#">Test</a>
    				<div>
    						<ul>
    								<li><a href="#">start Sub nav</a></li>
    								<li><a href="#">Sub nav</a></li>
    								<li><a href="#">Sub nav</a></li>
    								<li><a href="#">Sub nav</a></li>
    								<li><a href="#">Sub nav</a></li>
    								<li><a href="#">Sub nav</a></li>
    								<li><a href="#">Sub nav</a></li>
    								<li><a href="#">Sub nav</a></li>
    						</ul>
    				</div>
    		</li>
    </ul>
    </body>
    </html>

  6. #6
    I solve practical problems. bronze trophy
    Michael Morris's Avatar
    Join Date
    Jan 2008
    Location
    Knoxville TN
    Posts
    2,053
    Mentioned
    66 Post(s)
    Tagged
    0 Thread(s)
    I actually considered that for awhile, but some of the menus are much larger than the others so the delay wouldn't be consistent. For the moment I've went with a fade in / out effect instead and may revisit it later.


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
  •