Little bit of help please

E

elbow83

New Member
Hey all...
Wondering if someone can help me out with something.
I've been asked by someone to do a website for them, and they want their navigation bar to be set up the same way as the one on the National geographic site.
instead of drop down menus, the options come up under the links when you roll over them.
I've no idea how to do this... do i create the full line of buttons and nav links for each one, and change the states? thats the only thing i can think of... anyone know of a better way of doing it?
thanks in advance
 
M

mezangath

New Member
HTML: 
<ul id="navigation_tophat_primary" class="nav sf-menu sf-navbar">
						<li class="nav1"><h3><a class="hover" href="http://www.nationalgeographic.com" id="intl_link_tophat_primary_home">Home</a></h3>
							<ul class="nav">
								<li class="nav1"><a href="/news/">Daily News</a></li>

								<li class="nav2"><a href="http://ngm.nationalgeographic.com">The Magazine</a></li>
								<li class="nav3"><a href="http://maps.nationalgeographic.com">Maps</a></li>
								<li class="nav4"><a href="http://video.nationalgeographic.com">Video</a></li>
								<li class="nav5"><a href="/science/">Science</a></li>
								<li class="nav6"><a href="/education/">Education</a></li>
								<li class="nav7"><a href="http://games.nationalgeographic.com">Games</a></li>

								<li class="nav8"><a href="http://worldmusic.nationalgeographic.com">Music</a></li>
								<li class="nav9"><a href="http://blogs.nationalgeographic.com">Blogs</a></li>
								<li class="nav10"><a href="/movies/">Movies</a></li>
								<li class="nav11"><a href="/mission">In the Field</a></li>
								<li class="nav12"><a href="/siteindex/">Site Index</a></li>
							</ul>

						</li>
						<li class="nav2"><h3><a href="/photography/">Photography</a></h3>
							<ul class="nav">
								<li class="nav1"><a href="/photography/">Photography Home</a></li>
								<li class="nav2"><a href="/photography/photo-of-the-day/">Photo of the Day</a></li>
								<li class="nav3"><a href="/photography/photogalleries/">Galleries</a></li>
								
								<li class="nav5"><a href="/photography/wallpapers/">Wallpapers</a></li>

								<li class="nav6"><a href="/photography/photo-tips/">Photo Tips</a></li>
								<li class="nav7"><a href="/photography/photographers/">Photographers</a></li>
								<li class="nav8"><a href="http://gallery.pictopia.com/natgeo/">Buy Prints</a></li>
							</ul>
						</li>

						<li class="nav3"><h3><a href="/animals/">Animals</a></h3>

							<ul class="nav">
								<li class="nav1"><a href="/animals/">Animals Home</a></li>
								<li class="nav2"><a href="/animals/facts/">Animal Facts</a></li>
								<li class="nav3"><a href="/animals/photos/">Animal Photos</a></li>
								<li class="nav4"><a href="/animals/quiz/">Animal Quizzes</a></li>
								<li class="nav5"><a href="http://animals.nationalgeographic.com/wild/shows/">Wild TV Shows</a></li>

								<li class="nav6"><a href="http://animals.nationalgeographic.com/wild/community/blogs/inside-wild">Wild Blog</a></li>
					           </ul>
						</li>

						<li class="nav4"><h3><a href="/environment/">Environment</a></h3>
							<ul class="nav">
								<li class="nav1"><a href="/environment/">Environment Home</a></li>
								<li class="nav2"><a href="http://www.thegreenguide.com">Green Guide</a></li>

								<li class="nav3"><a href="/environment/global-warming/">Global Warming</a></li>
								<li class="nav4"><a href="/environment/natural-disasters/">Natural Disasters</a></li>
								<li class="nav5"><a href="/environment/habitats/">Habitats</a></li>
								<li class="nav6"><a href="http://www.nationalgeographic.com/freshwater">Freshwater</a></li>
					           </ul>
						</li>

						<li class="nav5"><h3><a href="/travel/">Travel</a></h3>
							<ul class="nav">
								<li class="nav1"><a href="/travel/">Travel Home</a></li>
								<li class="nav2"><a href="/travel/countries/">Countries</a></li>
								<li class="nav3"><a href="/travel/city-guides/">Cities</a></li>
								<li class="nav4"><a href="/travel/national-parks/">National Parks</a></li>

								
								<li class="nav5"><a href="http://travel.nationalgeographic.com/travel/top-10/">Top 10</a></li>
								<li class="nav6"><a href="http://traveler.nationalgeographic.com/">Traveler Magazine</a></li>
								<li class="nav7"><a href="http://blogs.nationalgeographic.com/blogs/intelligenttravel/">Travel Blog</a></li>
								<li class="nav8"><a href="/travel/travel-photos/">Travel Photos</a></li>
								<li class="nav9"><a href="/travel/travel-quizzes/">Travel Quizzes</a></li>
								<li class="nav10"><a href="http://www.nationalgeographicexpeditions.com/home">Travel With Us</a></li>

								
							</ul>
						</li>
						<li class="nav6"><h3><a href="http://adventure.nationalgeographic.com/">Adventure</a></h3>
							<ul class="nav">
								<li class="nav1"><a href="http://adventure.nationalgeographic.com/">Adventure Magazine</a></li>
								<li class="nav2"><a href="http://adventure.nationalgeographic.com/gear">Gear Guide</a></li>
								<li class="nav3"><a href="http://adventure.nationalgeographic.com/adventure/outfitterhome">Outfitters Guide</a></li>

								<li class="nav4"><a href="http://adventure.nationalgeographic.com/photography">Photography</a></li>
								<li class="nav5"><a href="http://adventure.nationalgeographic.com/video/player">Video</a></li>
								<li class="nav6"><a href="http://www.nationalgeographicexpeditions.com/home">Adventure Trips</a></li>
								<li class="nav7"><a href="http://www.topo.com/">Topo Maps</a></li>
							</ul>
						</li>
						<li class="nav7"><h3><a href="http://channel.nationalgeographic.com/" id="intl_link_tophat_primary_natgeotv">NatGeoTV</a></h3>

							<ul class="nav" id="intl_link_sub_natgeotv">
								<li class="nav1"><a href="http://channel.nationalgeographic.com/">NGC Home</a></li>
								<li class="nav2"><a href="http://channel.nationalgeographic.com/channel/tv-schedule">TV Schedule</a></li>
								<li class="nav3"><a href="http://channel.nationalgeographic.com/channel/content/games/">Games</a></li>
								<li class="nav4"><a href="http://mobilestore.nationalgeographic.com/Featured/Nat-Geo-Channel/">Mobile</a></li>
								<li class="nav5"><a href="http://ngcblog.nationalgeographic.com/ngcblog/">Community</a></li>

								<li class="nav6"><a href="http://channel.nationalgeographic.com/channel/videos/" class="popup">NGC Videos</a></li>
							</ul>
						</li>
						<li class="nav8"><h3><a href="http://kids.nationalgeographic.com/">Kids</a></h3>
							<ul class="nav">
								<li class="nav1"><a href="http://kids.nationalgeographic.com/">Kids Home</a></li>
								<li class="nav2"><a href="http://ad.doubleclick.net/clk;218355739;8304489;w?http://kids.nationalgeographic.com/Animals/">Animals</a></li>

								<li class="nav3"><a href="http://ad.doubleclick.net/clk;218355739;8304489;w?http://kids.nationalgeographic.com/Games/">Games</a></li>
								<li class="nav4"><a href="http://ad.doubleclick.net/clk;218355739;8304489;w?http://kids.nationalgeographic.com/Videos/">Videos</a></li>
								<li class="nav5"><a href="http://ad.doubleclick.net/clk;218355739;8304489;w?http://kids.nationalgeographic.com/Stories/">Stories</a></li>
								<li class="nav6"><a href="http://ad.doubleclick.net/clk;218355739;8304489;w?http://kids.nationalgeographic.com/Activities/">Activities</a></li>
								<li class="nav7"><a href="http://ad.doubleclick.net/clk;218355739;8304489;w?http://kids.nationalgeographic.com/Places/">People &amp; Places</a></li>

								<li class="nav8"><a href="http://ad.doubleclick.net/clk;218355739;8304489;w?http://kids.nationalgeographic.com/Photos/">Photos</a></li>
								<li class="nav9"><a href="http://ad.doubleclick.net/clk;218355739;8304489;w?http://kidsblogs.nationalgeographic.com/blogs/">Blogs</a></li>
							</ul>
						</li>

						

						<li class="nav10" id="intl_link_tophat_primary_shop"><h3><a href="http://shop.nationalgeographic.com/ngs/index.jsp?code=NG94000">Shop</a></h3>
							<ul class="nav">
								<li class="nav1"><a href="http://shop.nationalgeographic.com/ngs/index.jsp?code=NG94001">Store Home</a></li>

								<li class="nav2"><a href="http://shop.nationalgeographic.com/ngs/browse/category_giftfinder.jsp?categoryId=A245&addFacet=9004:A245&code=NG94002">Gift Finder</a></li>
								<li class="nav3"><a href="http://shop.nationalgeographic.com/ngs/browse/category.jsp?categoryId=A236&addFacet=9004:A236&code=NG94003">Channel Shop</a></li>
								<li class="nav4"><a href="http://shop.nationalgeographic.com/ngs/browse/category.jsp?categoryId=A091&addFacet=9004:A091&code=NG94004">Kids Shop</a></li>
								<li class="nav5"><a href="http://shop.nationalgeographic.com/ngs/category/shop-by-catalog?code=NG94005">Shop by Catalog</a></li>
								<li class="nav6"><a href="http://shop.nationalgeographic.com/ngs/browse/category_theme.jsp?categoryId=A179&addFacet=9004:A179&code=NG94006">Shop by Theme</a></li>
								<li class="nav7"><a href="http://shop.nationalgeographic.com/ngs/company/service.jsp?code=NG94007">Customer Service</a></li>

								<li class="nav8"><a href="http://shop.nationalgeographic.com/ngs/browse/category_sale.jsp?categoryId=A223&addFacet=9004:A223&code=NG94008">Sale Items</a></li>
							</ul>
						</li>
					</ul>

Source code is a interesting thing. :)
 
anna

anna

New Member
A List Apart has a good tutorial for a hybrid menu similar to what you are looking for. Give me a minute and I'll find it for you...
 
anna

anna

New Member
I'm just glad I can help someone! Usually I am the one asking all the questions! :)
 
You must log in or register to reply here.
Top