Page 1 of 1

How To Make an Accordion Navigation With HTML5 & CSS3 Rate Topic: -----

#1 EnvXOwner  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 357
  • View blog
  • Posts: 2,319
  • Joined: 10-August 09

Posted 15 January 2011 - 09:40 PM

Hello, today I shall be teaching you how to use HTML5 and CSS3 to make an accordion styled-navigation menu. In this tutorial I assume that you have basic knowledge of HTML and CSS. No knowledge of HTML5 and CSS3 are assumed. :) This is going to be a vertical navigation bar. When you click on a title link that a list expands containing the links to other pages. I'm sure, that you could easily adjust this to meet your needs, and if you can't just ask me. Now then lets get coding!
First this is how you shall start your HTML5 document like so:
<!DOCTYPE html>
	<html>
		<head>
	
		</head>
		<body>
			
		</body>
	</html>

As you can see so far we are pretty much using older HTML elements, except the doctype. It's not a XHTML or a HTML 4.1 doctype. This is the doctype for HTML5. Now you maybe asking why? Why do we need this doctype? Well we want to tell the browser that we will be using HTML5 elements and attributes. We don't want the browser to guess which doctype to use. This will end up turning into a cross browser compatibility issue which we don't want. Now we will add the HTML5 elements. After I add them you may then ask what's there purpose which I'll explain after the code:
<!DOCTYPE html>
	<html>
		<head>
			<link rel="stylesheet" type="text/css" href="nav.css" />
			<title>Accordion Navigation Menu</title>
		</head>
		<body>
			<header>
				<h1>Navigation Menu</h1>
			</header>
			<nav>

			</nav>
		</body>
	</html>

Now one question that you may be asking is where are my divs? Well, instead of those I'm using header and nav. There are many others for different situations. Don't worry those are the only HTML5 elements we will be using in this tutorial. These work as divs, they are shorter and easier to use. You can still use divs though if you want.

Here is what the full HTML should look like:
<!DOCTYPE html>
<html>
	<head>
		<link rel="stylesheet" type="text/css" href="nav.css" />
		<title>Accordion Navigation Menu</title>
	</head>
	<body>
		<header>
			<h1>Accordion Menu Made In HTML5 and CSS3</h1>
		</header>
		<nav>
			<ul>
				<li class="title"><a id="1" href="#1"><span>Hello</span></a><!-- the reason we use #1 is so that it will be the first child -->
					<ul>
						<li><a href="#">Home</a></li>
						<li><a href="http://dreamincode.net/">Dream.In.Code</a></li>
					</ul>
				</li>
				<li class="title"><a id="2" href="#2"><span>Social</span></a>
					<ul>
						<li><a href="http://facebook.com/">Facebook</a></li>
						<li><a href="http://twitter.com/">Twitter</a></li>
					</ul>
					<li class="bottom"><ul></ul></li>
				</li>
			</ul>
		</nav>
	</body>
</html>

Now lets get started with the CSS.

Now create an external stylesheet and call it “nav.css”. Add this code to the top of it:
*
{
	margin: 0;
	padding: 0;
}

This is called the “Universal Selector” It will select every selector we have and set it's margin and padding to 0. Now let's create the navigation:
nav ul{
	background: #e3e3e3;
	border-radius: 10px;
	box-shadow: #ccc 5px 5px 5px;
	list-style: none;
	width: 200px;
}
.title{
	border-top: 1px solid #000;
	font-size: 14px;
	overflow: hidden;
}
.title:first-child{
	border-top: none;
}
.title a span{
	color: #800000;
	display: block;
	padding: 10px 10px 10px 20px;
}
.title ul li a 
{
	background: #fff;
	color: #111;
	display: block;
	font-size: 12px;
 	height: 0px;
	line-height: 30px;
	padding-left: 20px;
	text-decoration: none;
 	-webkit-transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
}
.title ul li a:hover
{
	background: #eee;
	color: #000;
}
:target + ul li a 
{
	height: 30px;
}
.bottom{
	border-top: none;
	height: 20px;
}

Now I'll break the code up and explain it.

nav ul{
	background: #e3e3e3;
	border-radius: 10px;
	box-shadow: #ccc 5px 5px 5px;
	list-style: none;
	width: 200px;
}


In this code we set a grayish color for the background. Then we have two new properties that you may have never seen before. If you haven't that's because it's CSS3. The border-radius will make the border curve at as many pixels you declared; box-shadow makes a shadow go around the navigation bar, it has a grayish shadow that is 5px in length. List-style makes it so that there are no bullets on the list items. The width of the navigation is 200px.

.title{
	border-top: 1px solid #000;
	font-size: 14px;
	overflow: hidden;
}
.title:first-child{
	border-top: none;
}
.title a span{
	color: #800000;
	display: block;
	padding: 10px 10px 10px 20px;
}
.title ul li a 
{
	background: #fff;
	color: #111;
	display: block;
	font-size: 12px;
 	height: 0px;
	line-height: 30px;
	padding-left: 20px;
	text-decoration: none;
 	-webkit-transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
}
.title ul li a:hover
{
	background: #eee;
	color: #000;
}
:target + ul li a 
{
	height: 30px;
}


Now it's time to deal with the title and list items of the navigation bar. We want a border around the titles of the navigation bar. Therefore we set a border of 1 pixel, that is solid and is not dotted, excetera, and the color is black. When then set a size for the font. Then we hide the overflow.

Next is also a new CSS3 selector. We are selecting the first-child of the title. Which means the first title. We then make the border-top to 0. Our span is for the text of the link in the title. We set the color to maroon. We then make it display as a block. Then we give the links padding so they're not fighting for air.

Now we are going to effect the list and link of the navigation bar. We set the background to white. We then set the color of the text to a blackish color. We make the list items display as blocks. Then change the font size of the links to 12 pixels. We set the height as 0 so that the links are hidden unless clicked on. We set the line height to 20 pixels. Then we don't want a blue underline so we set the text decoration to none. The next to are new to CSS. They are CSS3 properties. As you can see they are transition properties and make something move. We want to move all of the items, at a speed of .5s (We don't want it to look like it's going to fast or to slow. Just right.) then we want the links to ease in and ease out. You have to do this for both browsers. I know there is a way to do it so that's compatible with Opera. I'm not sure about IE though.

Next is what the text going to look like when we hover over it. We sett the background to a grayish color again. Then we make the text color black.

Now we make it so that when you click on title that when the links come out that the height of each link is 30 pixels.

Lastly when we open the last title we don't the bottom to be a black line so we create a bottom for the navigation bar. We make the border top to 0 and the height to 10 pixels.

I hoped that you liked this almost painless way to use HTML5 and CSS3 to produce an accordion styled-navigation. If you have any questions please do ask!

Is This A Good Question/Topic? 2
  • +

Replies To: How To Make an Accordion Navigation With HTML5 & CSS3

#2 fallenreaper  Icon User is offline

  • D.I.C Head

Reputation: 3
  • View blog
  • Posts: 240
  • Joined: 19-June 10

Posted 20 February 2011 - 09:26 PM

thanks alot. I had to look into a bit with divs and functionality with my roommate has he been using php for a long time. your information came first, and helped me out alot, and he just sort of proof read and made sure everything was up to date and lookin sharp.

Thanks alot EnvXOwner
Was This Post Helpful? 1
  • +
  • -

Page 1 of 1