PDA

View Full Version : Flyout Menu


djshongo
10-21-2009, 08:54 AM
Hi Guys n Gals,

I have a menu, and currently it's just text, which when clicked on, takes you to the relevant page, simple? Yes.

However now, I would like it so that when this text (word) is clicked on (or rolled over) that a flyout menu will appear, showing other links.

Would it be difficult to ammend my current static menu, and incorporate the CSS Flyout?

My current code looks like this..
----
<td><div class="nav_bar" id="nav_bar">
<div align="center">
<a href="home.html"> Home</a>|
<a href="bio.html">Bio</a>|
<a href="tour.html">Tour|</a>
<a href="gallery.html">Gallery</a>|
<a href="links.html">Links</a>|
<a href="contact.html">Contact</a>|
<a href="guestbook.html">Guestbook| </a>
<a href="http://www.keith..../forums/">Forum</a>
</div>

</div></td>
----

Thanks!

:)

Corrosive
10-21-2009, 11:13 AM
Would it be difficult to ammend my current static menu, and incorporate the CSS Flyout?



I wouldn't have thought so. Have a look at the flyouts that JQuery can give you and also try googling 'Suckerfish' menus.

djshongo
10-21-2009, 12:08 PM
Thanks!

I will do now :)

Corrosive
10-21-2009, 12:38 PM
Suckerfish seem to be the menu of choice for Wordpress template designers so I guess they are pretty good.

djshongo
10-21-2009, 12:57 PM
found one that i'd like to try use..

http://www.cssplay.co.uk/menus/drop_examples.html

Its Menu No.5 on the list, pretty plain and standard, just text, but its what im looking for..

Not sure how i go about changing my current one to incorporate this into it tho..?

Corrosive
10-21-2009, 01:05 PM
Menu HTML...

<ul class="menu5">
<li class="home"><a href="#nogo">Home</a></li>
<li class="products"><a class="drop" href="#nogo">Products<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li class="subprod"><a href="#nogo">Mobiles</a></li>
<li class="subprod2"><a href="#nogo">Photoframes</a></li>
<li class="subprod2"><a href="#nogo">Tripods</a></li>
<li class="subprod"><a href="#nogo">Memory cards</a></li>
<li class="subprod3"><a class="drop" href="#nogo">Cameras<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">SLRs</a></li>
<li><a href="#nogo">Compact</a></li>
<li><a href="#nogo">Digital</a></li>
<li><a href="#nogo">Video</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="subprod2"><a href="#nogo">Camcorders</a></li>
<li class="subprod"><a href="#nogo">Accessories</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="services"><a class="drop" href="#nogo">Services<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li class="subserv4"><a href="#nogo">Photography</a></li>
<li class="subserv3"><a href="#nogo">Video editing</a></li>
<li class="subserv"><a href="#nogo">Web site Design and Hosting</a></li>
<li class="subserv5"><a href="#nogo">Reference guides</a></li>
<li class="subserv2"><a href="#nogo">Tutorials</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="contact"><a href="#nogo">Contact us</a></li>
<li class="site"><a href="#nogo">Site Map</a></li>
<li class="news"><a class="drop" href="#nogo">News<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li class="subnews3"><a href="#nogo">Breaking</a></li>
<li class="subnews"><a href="#nogo">Latest</a></li>
<li class="subnews"><a href="#nogo">May 2006</a></li>
<li class="subnews2"><a class="drop" href="#nogo">News Archives and Articles<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="left">
<li><a href="#nogo">April 2006</a></li>
<li><a href="#nogo">March 2006</a></li>
<li><a href="#nogo">February 2006</a></li>
<li><a href="#nogo">January 2006</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>

and menu CSS

/* ================================================== ==============
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/drop_examples.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the assocaited (x)html may be modified in any
way to fit your requirements.
================================================== ================= */
/* commom style for all browsers */

.menu5 {
text-align:left; font-family: verdana, sans-serif; position:relative; font-size:0.9em;height:2.5em; margin:0 padding:0; list-style-type:none;
}
.menu5 ul {
padding:0; margin:0; list-style-type:none; /* for Firefox */
}
.menu5 li {
float:left; position:relative;
}
.menu5 li a, .menu5 li a:visited {
display:block; text-decoration:none; width:6em; color:#000; float:left; padding-right:1em; height:3em; line-height:3em; color:#909;
}
* html .menu5 li a, .menu5 li a:visited {
width:7em; w\idth:6em; /* hack for IE5.5 */
}
.menu5 li a.drop, .menu5 li a.drop:visited {
font-weight:bold;
}
.menu5 li ul {
visibility:hidden; position:absolute; top:2.5em; left:0; height:0; overflow:hidden;
}
.menu5 table {
margin:-1px; border-collapse:collapse; font-size:1em; /* font size for IE5.5 */
}

/* fist line style for IE7 and non-IE browsers and the second line for IE5.5 and IE6 */
.menu5 li:hover a,
.menu5 li a:hover {
text-decoration:underline; border:0;
}
.menu5 li:hover ul,
.menu5 li a:hover ul {
visibility:visible; height:auto; width:10em; background:#fff; border:1px solid #ddd; left:0; top:2.5em; overflow:visible;
}
.menu5 li:hover ul li a,
.menu5 li a:hover ul li a {
display:block; font-weight:normal; background:transparent; text-decoration:none; height:auto; line-height:1.5em; padding:0.5em; width:9em;
}
* html .menu5 li a:hover ul li a {
width:10em; w\idth:9em; /* hack for IE5.5 */
}
.menu5 li:hover ul li a.drop,
.menu5 li a:hover ul li a.drop {
font-weight:bold;
}
.menu5 li:hover ul li ul,
.menu5 li a:hover ul li a ul {
visibility:hidden; position:absolute; top:0; left:9.5em; height:0; overflow:hidden;
}
.menu5 li:hover ul li a:hover,
.menu5 li a:hover ul li a:hover {
text-decoration:underline;
}
.menu5 li:hover ul li:hover ul,
.menu5 li a:hover ul li a:hover ul {
visibility:visible; color:#000; border:1px solid #ddd; height:auto; background:#fff; width:9.5em;
}
.menu5 li:hover ul li:hover ul.left,
.menu5 li a:hover ul li a:hover ul.left {
left:-9.3em;
}
.menu5 li:hover ul li:hover ul li a,
.menu5 li a:hover ul li a:hover ul li a {
display:block; height:auto;
}
.menu5 li:hover ul li:hover ul li:hover a,
.menu5 li a:hover ul li a:hover ul li a:hover {
text-decoration:underline;
}

can I assume you know what to do with HTML and a stylesheet?

djshongo
10-21-2009, 02:01 PM
Yea I seen the HTML and Stytlesheet, however I got a bit confused as the Links I currently have on my homepage are inside a <div>, centred in the middle of my page.

Also, I already have a CSS sheet applied the links on my 'nav bar'. i will just combine the two of these tho..

Corrosive
10-21-2009, 02:25 PM
Might be an idea to get it working in a fresh page and then see what you will need to do to combine the two. The (ul) list should just sit in your site where the navbar was previously but I can't speculate much more without seeing the site.

Corrosive
10-21-2009, 02:29 PM
I must admit to having a completely irrational dislike of flyout menus and I really don't know why. They've never done anything to me! As a consequence though I've never implemented one.

djshongo
10-21-2009, 02:50 PM
did what u said and got it working fine on a fresh page, had to change name of css file and few other bits n bobs but its working.

what is confusing me now is what css rule i need to change in order to make the area wider, currently i have 4 links, 3 are on one line, and the last seems to go to the next line.. im assuming its because the css rules need fiddled with!

---

#nav, #nav ul {
float: left;
width: 36em;
list-style: none;
line-height: 1;
background: white;
font-weight: bold;
padding: 0;
border: 0;
border-width: 1px 0;
margin: 0 0 1em 0;
}

#nav a {
display: block;
width: 10em;
w\idth: 6em;
color: #5C5858;
text-decoration: none;
padding: 0.25em 2em;
}

#nav li {
float: left;
padding: 0;
width: 10em;
}

#nav li ul {
position: absolute;
left: -999em;
height: auto;
width: 14.4em;
w\idth: 13.9em;
font-weight: normal;
border-width: 0.25em;
margin: 0;
}

#nav li li {
padding-right: 1em;
width: 13em
}

#nav li ul a {
width: 13em;
w\idth: 9em;
}

#nav li ul ul {
margin: -1.75em 0 0 14em;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}

#nav li:hover, #nav li.sfhover {
background: #FCDFFF;
}
--

Corrosive
10-21-2009, 02:58 PM
Maybe change the first style to 100% width and work back from there?

djshongo
10-21-2009, 03:08 PM
Excellt - works!!

Any idea how to make the opacity of the 'fly-out' 50%?! lol

Corrosive
10-21-2009, 03:12 PM
Excellt - works!!

Any idea how to make the opacity of the 'fly-out' 50%?! lol


Ha, ha. Now you are taking the p**s! Lol :wink:

I know how to do it with CSS for browsers other than IE...

http://corrosiveonline.co.uk/tutorials_css3_tricks.php

Bottom 'trick'.

IE uses alpha transparency I think. You might want to Google that :)

djshongo
10-21-2009, 03:14 PM
thanks for all ur help m8!

i'm a chancer arent i lol

Corrosive
10-21-2009, 05:02 PM
You certainly are but you have to admire that in a person ;)

edbr
10-22-2009, 02:17 AM
ie is a pain with transparencies but if you use an image as a background and reduce its visability in a photo editing program you stand a it is possible

djshongo
10-22-2009, 10:43 AM
I know wat u mean edbr, IE wont show transparancy Grrrrrr!
Im using a colout and trying to set opacity to 0.8, works fine in FF but not IE. Im guessing theres no easy way around this..

So, may just leave a background colour out altogether.. Or I'll have to live with opacity working in FF only...

Corrosive
10-22-2009, 11:01 AM
Opacity works on most browsers nowadays except IE. It is a real shame because it severely limits us playing with new toys as designers.

djshongo
10-22-2009, 02:25 PM
Hi,

Ive now got it working the way I want, I got some CSS code and altered it, so now I have 4 basic links that when rollod over, produce a nice flyout menu :)

However, they are sitting at the LEFT hand side of my page, and way I can center then on my page?
Im sure something in this code needs fixed, but im damned if i can find it! lol

Thanks!

----


body {
font-family: "Trebuchet MS", Arial, sans-serif;
font-size: 100%;
background-color: #FFFFFF;
margin: 24px 0;
padding: 0;
background-color: #cccccc;
background-repeat: repeat-x;
}

#menuwrapper {
background-repeat: repeat-x;
width: 100%;
margin-left: auto ;
margin-right: auto ;
text-align: center;

}

.clearit {
clear: both;
height: 0;
line-height: 0.0;
font-size: 0;
}

#p7menubar, #p7menubar ul {
padding: 0;
margin: 0;
list-style: none;
font-family: Arial, Helvetica, sans-serif;
}

#p7menubar a {
display: block;
text-decoration: none;
padding: 5px 10px 5px 10px;
border-right: ;
font-size: .85em;
color: #000000;
}

#p7menubar a.trigger {
padding: 5px 16px 5px 10px;
background-image: url(images/p7PM_dark_south.gif);
background-repeat: no-repeat;
background-position: right center;
}

#p7menubar li {
float: left;
width: 9em;
}

#p7menubar li ul, #p7menubar ul li {
width: 8em;
}

#p7menubar ul li a {
color: #565656;
border-right: 0;
padding: 3px 12px 3px 16px;
}

#p7menubar li ul {
position: absolute;
display: none;
background-color: ;
border-right: ;
border-bottom: ;
background-image: ;
background-repeat: ;
}

#p7menubar li:hover ul, #p7menubar li.p7hvr ul {
display: block;
}

#p7menubar li {width: auto;}
----