[coding tut] - NextGenUpdate

Post: [coding tut]

09-27-2009, 03:22 AM #1

boxiom

Do a barrel roll!

124

Posts

Reputation

Credits

Member

Sep 2009

NextGenUpdate

(adsbygoogle = window.adsbygoogle || []).push({}); In this tutorial, I'm going to teach you how to make a drop down navigation like this You must login or register to view this content..

First you open your favorite text editor.

CSS

    #nav {

	padding:0;

	margin:0;

	list-style:none;

	height:39px;

	background: url(images/nav_bg.gif);

	position:relative;

	z-index:500;

	font-family:Verdana, Arial, Helvetica, sans-serif;

	font-size: 12px;

}

#nav li.top {display:block; float:left;}

#nav li a.top_link {display:block; float:left; height:39px; width:100%; line-height:35px; color:#FFF; text-decoration:none; font-size:12px; padding:0 0 0 12px; cursor:pointer;background: url(images/nav_bg.gif);}

#nav li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:39px;background:url(images/nav_bg.gif) right top;}

#nav li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:36px; background:url(images/nav_bg.gif) no-repeat right top;}

#nav li a.top_link:hover {color:#0A6A9A; background: url(images/nav_bg.gif) no-repeat;}

#nav li a.top_link:hover span {background:url(images/nav_bg.gif) no-repeat right top;}

#nav li a.top_link:hover span.down {background:url(images/nav_bg.gif) no-repeat right top;}



#nav li:hover > a.top_link {color:#0A6A9A; background: url(images/nav_bg.gif) no-repeat;}

#nav li:hover > a.top_link span {background:url(images/nav_bg.gif) no-repeat right top;}

#nav li:hover > a.top_link span.down {background:url(images/nav_bg.gif) no-repeat right top;}



/* Default list styling */



#nav li:hover {position:relative; z-index:200;}



/* keep the 'next' level invisible by placing it off screen. */

#nav ul, 

#nav li:hover ul ul,

#nav li:hover ul li:hover ul ul,

#nav li:hover ul li:hover ul li:hover ul ul,

#nav li:hover ul li:hover ul li:hover ul li:hover ul ul

{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}



#nav li:hover ul.sub

{left:0; top:31px; background: #202020; padding:3px; border:1px solid #000000; white-space:nowrap; width:90px; height:auto; z-index:300;}

#nav li:hover ul.sub li

{display:block; height:20px; position:relative; float:left; width:90px; font-weight:normal;}

#nav li:hover ul.sub li a

{display:block; font-size:11px; height:20px; width:90px; line-height:20px; text-indent:5px; color:#FFF; text-decoration:none;}

#nav li:hover ul.sub li a:hover 

{background:#202020; color:#0A6A9A;}



#nav li:hover ul li:hover ul,

#nav li:hover ul li:hover ul li:hover ul,

#nav li:hover ul li:hover ul li:hover ul li:hover ul,

#nav li:hover ul li:hover ul li:hover ul li:hover ul li:hover ul

{left:90px; top:-4px; background: #202020; padding:3px; border:1px solid #000000; white-space:nowrap; width:90px; z-index:400; height:auto;}

Put that in, and call it 'dropdown.css' without quotes.

Then open another and put this in it

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">

<html xmlns="https://www.w3.org/1999/xhtml" xml:lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>rop down navigation</title>



<link rel="stylesheet" type="text/css" href="dropdown.css" />



</head>



<body>

<ul id="nav" name="nav">

	<li class="top"><a href="#nogo1" class="top_link"><span>No Drop 1</span></a></li>

	<li class="top"><a href="#nogo2" id="dd1" class="top_link"><span class="down">rop Down 1</span></a>

		<ul class="sub">

			<li><a href="#nogo3" class="fly">Child Link 1</a>

					<ul>

						<li><a href="#nogo4">Child Link</a></li>

						<li><a href="#nogo5">Child Link</a></li>

						<li><a href="#nogo6">Child Link</a></li>

					</ul>

			</li>

			<li class="mid"><a href="#nogo7" class="fly">Child Link 2</a>

					<ul>

						<li><a href="#nogo8">Child Link</a></li>

						<li><a href="#nogo9">Child Link</a></li>

						<li><a href="#nogo10">Child Link</a></li>

						<li><a href="#nogo11" class="fly">Child Link 3</a>

							<ul>

								<li><a href="#nogo12">Child Link</a></li>

								<li><a href="#nogo13">Child Link</a></li>

								<li><a href="#nogo14">Child Link</a></li>

							</ul>

						</li>

						<li><a href="#nogo15">Child Link</a></li>

						<li><a href="#nogo16" class="fly">Child Link 4</a>

							<ul>

								<li><a href="#nogo17">Child Link</a></li>

								<li><a href="#nogo18">Child Link</a></li>

							</ul>

						</li>

					</ul>

			</li>

			<li><a href="#nogo19">Child Link</a></li>

			<li><a href="#nogo20">Child Link</a></li>

			<li><a href="#nogo21">Child Link</a></li>

		</ul>

	</li>

	<li class="top"><a href="#nogo22" id="dd2" class="top_link"><span class="down">rop Down 2</span></a>

		<ul class="sub">

			<li><a href="#nogo23">Child Link</a></li>

			<li><a href="#nogo24">Child Link</a></li>

			<li><a href="#nogo25">Child Link</a></li>

			<li><a href="#nogo26">Child Link</a></li>

		</ul>

	</li>

	<li class="top"><a href="#nogo27" id="dd3" class="top_link"><span class="down">rop Down 3</span></a>

		<ul class="sub">

			<li><a href="#nogo28">Child Link</a></li>

			<li><a href="#nogo29" class="fly">Child Link 5</a>

				<ul>

					<li><a href="#nogo30">Child Link</a></li>

					<li><a href="#nogo31">Child Link</a></li>

					<li><a href="#nogo32">Child Link</a></li>

					<li><a href="#nogo33" class="fly">Child Link 6</a>

						<ul>

							<li><a href="#nogo34" class="fly">Child Link 7</a>

								<ul>

									<li><a href="#nogo35">Child Link</a></li>

									<li><a href="#nogo36">Child Link</a></li>

									<li><a href="#nogo37">Child Link</a></li>

									<li><a href="#nogo38" class="fly">Child Link 8</a>

										<ul>

											<li><a href="#nogo39">Child Link</a></li>

											<li><a href="#nogo40">Child Link</a></li>

											<li><a href="#nogo41">Child Link</a></li>

										</ul>

									</li>

									<li><a href="#nogo42">Child Link</a></li>

									<li><a href="#nogo43">Child Link</a></li>

								</ul>

							</li>

							<li><a href="#nogo44">Child Link</a></li>

							<li><a href="#nogo45">Child Link</a></li>

							<li><a href="#nogo46">Child Link</a></li>

						</ul>

					</li>

					<li><a href="#nogo47">Child Link</a></li>

					<li><a href="#nogo48">Child Link</a></li>

				</ul>

			</li>

			<li><a href="#nogo49">Child Link</a></li>

			<li><a href="#nogo50">Child Link</a></li>

			<li><a href="#nogo51">Child Link</a></li>

			<li><a href="#nogo52">Child Link</a></li>

		</ul>

	</li>

	<li class="top"><a href="#nogo53" id="dd4" class="top_link"><span class="down">rop Down 4</span></a>

		<ul class="sub">

			<li><a href="#nogo54">Child Link</a></li>

			<li><a href="#nogo55">Child Link</a></li>

			<li><a href="#nogo56">Child Link</a></li>

		</ul>

	</li>

	<li class="top"><a href="#nogo57" id="nd2" class="top_link"><span>No Drop 2</span></a></li>

	<li class="top"><a href="#nogo58" id="dd5" class="top_link"><span class="down">rop Down 5</span></a>

		<ul class="sub">

			<li><a href="#nogo59">Child Link</a></li>

			<li><a href="#nogo60">Child Link</a></li>

			<li><a href="#nogo61">Child Link</a></li>

            <li><a href="#nogo62">Child Link</a></li>

		</ul>

	</li>

</ul>

</ul>

</body>

</html>

Change whatever info you want, on any of these files.

Now you have a drop down navigation! Hope this tutorial helped. If anyone needs any help, let me know.

Written by Unlucky of You must login or register to view this content.
You must login or register to view this content.