7 Replies - 734 Views - Last Post: 07 February 2013 - 03:12 PM

#1 Kirstine  Icon User is offline

  • New D.I.C Head

Reputation: 2
  • View blog
  • Posts: 37
  • Joined: 04-February 13

How to make dropdown navigation.

Posted 05 February 2013 - 02:05 AM

How can I make ah menu bar that when ouse over, dropdown will appear. With the use of CSS. any help or references?
Is This A Good Question/Topic? 0
  • +

Replies To: How to make dropdown navigation.

#2 raghav.naganathan  Icon User is offline

  • Perfectly Squared ;)
  • member icon

Reputation: 408
  • View blog
  • Posts: 1,440
  • Joined: 14-September 12

Re: How to make dropdown navigation.

Posted 05 February 2013 - 02:12 AM

Well, I believe the apt forum for this would be HTML/CSS...and yes, you will require CSS for that...I would suggest you to look at the top and z-index properties of CSS for the dropdown function.

regards,
Raghav

This post has been edited by raghav.naganathan: 05 February 2013 - 02:14 AM

Was This Post Helpful? 0
  • +
  • -

#3 Kirstine  Icon User is offline

  • New D.I.C Head

Reputation: 2
  • View blog
  • Posts: 37
  • Joined: 04-February 13

Re: How to make dropdown navigation.

Posted 05 February 2013 - 02:23 AM

Can you give me any example for that? I'm not expert with CSS :(
Was This Post Helpful? 0
  • +
  • -

#4 raghav.naganathan  Icon User is offline

  • Perfectly Squared ;)
  • member icon

Reputation: 408
  • View blog
  • Posts: 1,440
  • Joined: 14-September 12

Re: How to make dropdown navigation.

Posted 05 February 2013 - 02:30 AM

Well, I would say something like this...top attribute and your z-index attribute will only work if the elements have position as their attribute...I know this sounds new to you so...as for now...you concentrate on top

<!DOCTYPE html>
<html>
<head>
<style>
h1
{
position:absolute;
top:30px;//You can change the values to 60, 90 and so on...the heading will move down accordingly
}
</style>
</head>

<body>
<h1>This is a heading</h1>
</body>
</html>


regards,
Raghav

This post has been edited by raghav.naganathan: 05 February 2013 - 02:32 AM

Was This Post Helpful? 0
  • +
  • -

#5 Kirstine  Icon User is offline

  • New D.I.C Head

Reputation: 2
  • View blog
  • Posts: 37
  • Joined: 04-February 13

Re: How to make dropdown navigation.

Posted 05 February 2013 - 04:05 AM

I have here my css for navigation, I able to make it through tutorial
ul, li{margin:0; border:0; padding:0; list-style:none;}
#navigation{
	font-size:11px;
	background:url(images/templatemo_menu_bg.jpg);
	font-weight:bold;
	padding:4px;
	height:30px;
}
#navigation .menu li {
	background:url(lm.png) left top no-repeat;
	height:30px;
	float:left;
	margin-left:10px;
}
#navigation .menu li a{
	color:#000000;
	text-decoration:none;
	padding:0 10px;
	height:30px;
	line-height:30px;
	display:block;
	float:left;
	padding:0 26px 0 10px;
	background:url(rm.png) right top no-repeat;
}
#navigation .menu li a:hover{
	color:#000000;
}

#navigation ul .submenu {
	border:solid 1px c1dea1;
	border-top:none;
	background:#CCCCCC;
	top:4px;
	width:150px;
	padding:6px 0;
	clear:both;
	z-index:2;
	display:none;
}
#navigation ul .submenu li{
	display:block;
	float:none;
	margin:0 6px;
	border:0;
	height:auto;
	line-height:normal;
	border-top:solid 1px ff00cc;
}
#navigation .submenu li a{
	background:none;
	display:block;
	float:none;
	padding:6px 6px;
	height:auto;
	color:ff66ff;
	line-height:normal;
}
#navigation .submenu li a:hover{
	background:#FF33CC;
}



the HTML
<div id="navigation">
		<ul class="menu">
		<li><a href="index.php" class="current">Home</a></li>
		<li><a href="#" onclick=")"> Services</a></li>
			<ul class="submenu">
			<li><a href="#">Services1</a></li>
			<li><a href="#">Services2 </a></li>
			<li><a href="#">Services3</a></li>
			</ul> 
		<li><a href="#">About Us</a></li>
		<li><a href="#">Contact Us</a></li>
		</ul>
	</div>


Was This Post Helpful? 0
  • +
  • -

#6 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3541
  • View blog
  • Posts: 10,250
  • Joined: 08-June 10

Re: How to make dropdown navigation.

Posted 05 February 2013 - 04:21 AM

View PostKirstine, on 05 February 2013 - 10:05 AM, said:

any help or references?

search for "Suckerfish Dropdown".
Was This Post Helpful? 0
  • +
  • -

#7 Anthonidas  Icon User is offline

  • D.I.C Head

Reputation: 30
  • View blog
  • Posts: 218
  • Joined: 25-April 11

Re: How to make dropdown navigation.

Posted 05 February 2013 - 05:25 AM

in theese cases: Google is your friend! ;)

I did a quick search and found that one: http://line25.com/tu...s-dropdown-menu
Was This Post Helpful? 1
  • +
  • -

#8 FrankC  Icon User is offline

  • New D.I.C Head

Reputation: 3
  • View blog
  • Posts: 46
  • Joined: 06-October 11

Re: How to make dropdown navigation.

Posted 07 February 2013 - 03:12 PM

View PostAnthonidas, on 05 February 2013 - 05:25 AM, said:

in theese cases: Google is your friend! ;)/>/>/>/> I did a quick search and found that one: http://line25.com/tu...s-dropdown-menu


That tutorial uses unnecessarily complicated code and a few matters that are not supported by IE6 and/or 7, such as display:inline-table and :after. Here is a tutorial that makes an absolutely cross-browser menu with a minimum of coding. And it covers how to make the menu work on touchscreens...

This post has been edited by FrankC: 07 February 2013 - 03:14 PM

Was This Post Helpful? 1
  • +
  • -

Page 1 of 1