New Topic/Question
Reply
How can I make ah menu bar that when ouse over, dropdown will appear. With the use of CSS. any help or references?
7 Replies - 504 Views - Last Post: 07 February 2013 - 03:12 PM
MultiQuoteReplies To: How to make dropdown navigation.
#2
raghav.naganathan
- Perfectly Squared ;)
-
Reputation: 407
- 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
regards,
Raghav
This post has been edited by raghav.naganathan: 05 February 2013 - 02:14 AM
Was This Post Helpful?
0
#4
raghav.naganathan
- Perfectly Squared ;)
-
Reputation: 407
- 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
regards,
Raghav
<!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
- New D.I.C Head
Reputation: 2
- 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
the HTML
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
#7
Anthonidas
- D.I.C Head
Reputation: 29
- Posts: 192
- 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
I did a quick search and found that one: http://line25.com/tu...s-dropdown-menu
Was This Post Helpful?
1
#8
FrankC
- New D.I.C Head
Reputation: 3
- Posts: 42
- Joined: 06-October 11
Re: How to make dropdown navigation.
Posted 07 February 2013 - 03:12 PM
Anthonidas, 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
/>/>/>/> I did a quick search and found that one: http://line25.com/tu...s-dropdown-menuThat 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
|
|
| 