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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Dec 2012
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question Really Cool CSS Navigation w/o Javascript

    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

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,642
    Thanks
    6
    Thanked 1,005 Times in 978 Posts
    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.

  • Users who have thanked VIPStephan for this post:

    jpt145 (12-11-2012)

  • #3
    New to the CF scene
    Join Date
    Dec 2012
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Smile

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

  • #4
    New to the CF scene
    Join Date
    Dec 2012
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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

  • #5
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,642
    Thanks
    6
    Thanked 1,005 Times in 978 Posts
    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>


  •  

    Posting Permissions

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