| View previous topic :: View next topic |
| Author |
Message |
DaveWhitwood
Joined: 02 Mar 2009
Posts: 22
|
 Posted: Thu Mar 05, 2009 5:30 am Creating a drop down menu like yours |
 |
|
|
| At the top of your pages you have menus "Home, Tutorial, forum, quick list, css" two of which when I move my mouse over show a dropped down menu. How do you create this, and can it be done so that it is on the side of a page instead of the top? |
|
PayneLess Designs
Joined: 28 Feb 2007
Posts: 4883
Location: MS
|
| Posted: Thu Mar 05, 2009 11:55 am |
|
|
|
Yes, indeed. Menu can be done as you want them. Check out the following site which has working examples of the menu types you want. Just copy code from View Source as author states. You might even find a better one.
cssPlay
Menu Tutorial |
|
DaveWhitwood
Joined: 02 Mar 2009
Posts: 22
|
| Posted: Thu May 14, 2009 12:54 am |
|
|
|
| I have had a look on CSSPlay, it's a great site. Problem I am having is once the code is copied I don't get the same as http://www.cssplay.co.uk/menus/flyoutt.html all I get is it displayed as a list obviously as links but not in the box format like the example. I have also copied the CSS and it is attached. What am I missing? |
|
sticks464
Joined: 31 Dec 2006
Posts: 2906
|
| Posted: Thu May 14, 2009 4:01 am |
|
|
|
| Will need to see your code to see how you have implemented it to find errors. |
|
PayneLess Designs
Joined: 28 Feb 2007
Posts: 4883
Location: MS
|
| Posted: Thu May 14, 2009 4:12 am |
|
|
|
| I would like a link to the online problem page as many times other coding errors are affecting the problem which is not always apparent on code posted here. |
|
DaveWhitwood
Joined: 02 Mar 2009
Posts: 22
|
| Posted: Thu May 14, 2009 4:34 am |
|
|
|
I cannot provide you with the live page as it is for a military intranet. I can paste the two files "css" and "html" if you like, although they are not short.
the CSS script is below:
| Quote: |
/* common styling */
.menu {font-family: arial, sans-serif; width:106px; height:150px; position:relative; margin:0; font-size:11px; margin:50px 0;}
.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#000; width:104px; height:20px; text-align:center; border:1px solid #fff; border-width:1px 1px 0 0; background:#c9c9a7; line-height:19px; font-size:11px;}
.menu ul {padding:0; margin:0;list-style-type: none; }
.menu ul li {float:left; margin-right:1px; position:relative;}
.menu ul li ul {display: none;}
/* specific to non IE browsers */
.menu ul li:hover a {color:#fff; background:#b3ab79;}
.menu ul li:hover ul {display:block; position:absolute; top:0; left:105px; width:105px;}
.menu ul li:hover ul li a.hide {background:#dfc184; color:#000;}
.menu ul li:hover ul li:hover a.hide {width:150px;}
.menu ul li:hover ul li ul {display: none;}
.menu ul li:hover ul li a {display:block; background:#b3ab79; color:#000; width:150px;}
.menu ul li:hover ul li a:hover {background:#dfc184; color:#000;}
.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:151px; top:0; color:#000;}
.menu ul li:hover ul li:hover ul li a {display:block; width:200px; background:#dfc184; color:#000;}
.menu ul li:hover ul li:hover ul li a:hover {background:#bd8d5e; color:#fff;}
|
[/list] |
|
PayneLess Designs
Joined: 28 Feb 2007
Posts: 4883
Location: MS
|
| Posted: Thu May 14, 2009 5:00 am |
|
|
|
Aside from that CSS, you need the CSS for IE which is linked to externally, also:
http://www.cssplay.co.uk/menus/css/flyout_ie.css
The link on the page is like so:
| Code: |
<!--[if lte IE 6]>
<link rel="stylesheet" media="all" type="text/css" href="css/flyout_ie.css" />
<![endif]-->
</head> |
Make sure it goes just before the closing head tag.
The one you copied is linked like this:
| Code: |
| <link rel="stylesheet" media="all" type="text/css" href="css/flyout.css" /> |
Of course, change the names of the folder and file if necessary.
You need the HTML between "<div class="menu">" and the closing div. |
|
DaveWhitwood
Joined: 02 Mar 2009
Posts: 22
|
| Posted: Thu May 14, 2009 7:10 am |
|
|
|
Thanks, That'll teach me to pay more attention when copying code.  |
|
PayneLess Designs
Joined: 28 Feb 2007
Posts: 4883
Location: MS
|
| Posted: Thu May 14, 2009 9:48 am |
|
|
|
 Been there, done it, too.  Post back if you still have a problem. |
|
|
HTML Help Forum
FAQ
Search
Memberlist
Register
Profile
Log in to check your private messages
Log in
