Really Cool CSS Navigation w/o Javascript

jpt145 · 12-11-2012, 09:17 AM

See www.Hilton.com

Anybody have know how this CSS full screen drop down element is coded>

At www.hilton.com on the homepage its in the middle of the screen, once you click through it goes to the top.

Im trying to figure out how they did this using only CSS. I've done CSS only drop down menus before, but they were never full screen width like this, and in all my attempts, the child elements align under the parent LI element.

They have that too technically, but I can figure out how to make the child elements background go 100% screen width yet.

This is a really cool menu, if anyboby can point me in the right direction, when I code it I'll post it here and give you credit.

Thanks

JT

VIPStephan · 12-11-2012, 10:04 AM

First of all: The dropdown functionality doesn’t work without JavaScript, so it’s not a CSS-only dropdown.
Layout wise there are several ways to do this. One would be to have a regular list for the links and then some sections below which would represent the dropdown items, all in one container that is 100% wide and has a blue background. On mouseover you would hide and show the items which will push the bottom edge of the container down and there you have your special thing.

A true CSS-only solution would be to put the dropdown items into the list items of the menu and position them absolutely but without positioning the parent list items relative, so the dropdown items would be positioned relative to the edge of the overall container, not to the list items. Then make them 100% wide and give them a blue background and there you go.

jpt145 · 12-11-2012, 10:10 AM

Thanks, Im working on it and will post the result wen Im done. Thanks alot really.

jpt145 · 12-11-2012, 12:17 PM

I've got the Pure CSS version working. Only its difficult to center the drop down items because the centering is established by the root list -the main menu. Since the Sub menu is positioned absolute, its removed from positioning relative to the parent, and thus a pain to center.

I'd need to nest the sub list all over again and that might pose other problems.

Traditional javascript maniplulating elements is a better way to do this I think.

Looks like thats what you were thinking too ?

JT

VIPStephan · 12-11-2012, 02:15 PM

You can put another container inside and center that one. Here is a simple mock-up – and it’s still only one way of a few to do it:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<title></title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<style type="text/css">
		body, #nav {
			margin: 0;
			padding: 0;
			list-style: none;
		}
		#header {background: olive;}
		#nav {
			text-align: center;
			position: relative;
			background: green;
		}
		#nav li {
			display: inline-block;
			background: lime;
		}
		#nav li a {
			display: block;
			padding: 5px 10px;
		}
		#nav li .container {
			position: absolute;
			left: 0;
			width: 100%;
			background: green;
			text-align: left;
			display: none;
		}
		#nav li:hover .container {display: block;}
		#nav li .container > div {
			width: 300px;
			margin: auto;
			background: aqua;
		}
		</style>
	</head>
	<body>
		<div id="container">
			<div id="header">
				<ul id="nav">
					<li>
						<a href="">link 1</a>
						<div class="container">
							<div>
							hello world
							</div>
						</div>
					</li>
					<li>
						<a href="">link 2</a>
						<div class="container">
							<div>
							I’m centered
							</div>
						</div>
					</li>
					<li>
						<a href="">link 3</a>
						<div class="container">
							<div>
							me too!
							</div>
						</div>
					</li>
				</ul>
			</div>
		</div>
	</body>
</html>