SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

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

  1. Dec 24, 2012 10:25 #1
    Michael Morris
    Michael Morris is offline
    I solve practical problems. bronze trophy
     Michael Morris's Avatar
    Join Date
    Jan 2008
    Location
    Knoxville TN
    Posts
    1,906
    Mentioned
    32 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?
    Reply With Quote Reply With Quote
  2. Dec 24, 2012 13:54 #2
    dresden_phoenix
    dresden_phoenix is offline
    Community Advisor silver trophybronze trophy
     dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Rockford, IL
    Posts
    2,371
    Mentioned
    11 Post(s)
    Tagged
    0 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
    Brilliant ideas, elegant execution.
    Graphic Design, Art Direction, Copywriting and Web Design.
    Reply With Quote Reply With Quote
  3. Dec 24, 2012 14:11 #3
    Michael Morris
    Michael Morris is offline
    I solve practical problems. bronze trophy
     Michael Morris's Avatar
    Join Date
    Jan 2008
    Location
    Knoxville TN
    Posts
    1,906
    Mentioned
    32 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?
    Reply With Quote Reply With Quote
  4. Dec 24, 2012 17:40 #4
    dresden_phoenix
    dresden_phoenix is offline
    Community Advisor silver trophybronze trophy
     dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Rockford, IL
    Posts
    2,371
    Mentioned
    11 Post(s)
    Tagged
    0 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.
    Brilliant ideas, elegant execution.
    Graphic Design, Art Direction, Copywriting and Web Design.
    Reply With Quote Reply With Quote
  5. Dec 26, 2012 05:54 #5
    Paul O'B
    Paul O'B is online now
    The CSS Clinic is open silver trophybronze trophy
     SitePoint Award Recipient Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    37,800
    Mentioned
    99 Post(s)
    Tagged
    3 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>
    www.pmob.co.uk CSS FAQ 3 col demo Read My CSS Articles
    Ultimate CSS Reference
    Check out SitePoint's latest JavaScript challenge
    Reply With Quote Reply With Quote
  6. Dec 26, 2012 16:56 #6
    Michael Morris
    Michael Morris is offline
    I solve practical problems. bronze trophy
     Michael Morris's Avatar
    Join Date
    Jan 2008
    Location
    Knoxville TN
    Posts
    1,906
    Mentioned
    32 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.
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

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
  •  

Forum Rules