SuperMike
January 8th, 2007, 02:50 PM
I'm trying to create flyout menus to enhance this howto article:
http://www.ubuntuforums.org/showthread.php?t=333862
But for some reason I can't add an Edit menu beside it and it goes under it instead. Do you know what might be the issue? In general I'm looking for menus that sort of look like what you might see in an application except that you don't have to click File, Edit, and so on, to see the menu. Doing it purely in CSS would be ideal because it's cleaner, and since I'm doing an XUL app on Firefox, I won't need to worry about Internet Exploder.
<html>
<head>
<title>Pure CSS Menus</title>
<style type="text/css">
body {
background: #f7f7f7;
}
ul {
padding: 0;
margin: 0;
/* border-bottom: 1px solid silver; */
}
ul li {
list-style-type: none;
border-width: 1px 1px 0 3px;
position: relative;
margin: 0;
padding: 0;
}
ul ul {
display: none;
}
ul li:hover > ul {
display: block;
position: absolute;
top: -1px;
left: 100%;
border: 1px solid silver;
}
li a {
display: block;
padding: 5px 7px;
text-decoration: none;
background: #f7f7f7;
color: black;
font-family: Arial,sans;
font-size: 12px;
cursor: default;
}
ul#topmenu {
width: 6em;
}
ul#topmenu > li:hover > ul {
width: 10em;
top: 1.5em;
left: -3px;border: 1px solid silver;
}
ul ul {
width: 10em;
}
div#menus {
border-bottom: 1px solid Gainsboro;
}
li#break {
color: Gainsboro;
height: 1px;
margin-left: 6px;
margin-right: 6px;
border-top: 1px solid silver;
}
li#flyout > a {
background-image: url('flyout.png');
background-repeat: no-repeat;
background-position: right;
}
ul#topmenu a:hover {
background-color: Gainsboro;
}
</style>
</head>
<body topmargin=0 leftmargin=0 marginwidth=0 marginheight=0>
<div id="menus">
<ul id="topmenu">
<li class="sub"><a href="">File</a>
<ul>
<li class="sub" id="flyout"><a href="myapp/index.js?mode=new" title="">New</a>
<ul>
<li><a href="myapp/index.js?mode=test1" title="">test1</a></li>
<li><a href="myapp/index.js?mode=test2" title="">test2</a></li>
</ul>
</li>
<li><a href="myapp/index.js?mode=open" title="">Open</a></li>
<li><a href="myapp/index.js?mode=save" title="">Save</a></li>
<li id="break"></li>
<li><a href="myapp/index.js?mode=quit" title="">Quit</a></li>
</li>
</ul>
</div>
</body>
</html>
P.S. If you have a way to make the code even tighter, that's way cool too.
http://www.ubuntuforums.org/showthread.php?t=333862
But for some reason I can't add an Edit menu beside it and it goes under it instead. Do you know what might be the issue? In general I'm looking for menus that sort of look like what you might see in an application except that you don't have to click File, Edit, and so on, to see the menu. Doing it purely in CSS would be ideal because it's cleaner, and since I'm doing an XUL app on Firefox, I won't need to worry about Internet Exploder.
<html>
<head>
<title>Pure CSS Menus</title>
<style type="text/css">
body {
background: #f7f7f7;
}
ul {
padding: 0;
margin: 0;
/* border-bottom: 1px solid silver; */
}
ul li {
list-style-type: none;
border-width: 1px 1px 0 3px;
position: relative;
margin: 0;
padding: 0;
}
ul ul {
display: none;
}
ul li:hover > ul {
display: block;
position: absolute;
top: -1px;
left: 100%;
border: 1px solid silver;
}
li a {
display: block;
padding: 5px 7px;
text-decoration: none;
background: #f7f7f7;
color: black;
font-family: Arial,sans;
font-size: 12px;
cursor: default;
}
ul#topmenu {
width: 6em;
}
ul#topmenu > li:hover > ul {
width: 10em;
top: 1.5em;
left: -3px;border: 1px solid silver;
}
ul ul {
width: 10em;
}
div#menus {
border-bottom: 1px solid Gainsboro;
}
li#break {
color: Gainsboro;
height: 1px;
margin-left: 6px;
margin-right: 6px;
border-top: 1px solid silver;
}
li#flyout > a {
background-image: url('flyout.png');
background-repeat: no-repeat;
background-position: right;
}
ul#topmenu a:hover {
background-color: Gainsboro;
}
</style>
</head>
<body topmargin=0 leftmargin=0 marginwidth=0 marginheight=0>
<div id="menus">
<ul id="topmenu">
<li class="sub"><a href="">File</a>
<ul>
<li class="sub" id="flyout"><a href="myapp/index.js?mode=new" title="">New</a>
<ul>
<li><a href="myapp/index.js?mode=test1" title="">test1</a></li>
<li><a href="myapp/index.js?mode=test2" title="">test2</a></li>
</ul>
</li>
<li><a href="myapp/index.js?mode=open" title="">Open</a></li>
<li><a href="myapp/index.js?mode=save" title="">Save</a></li>
<li id="break"></li>
<li><a href="myapp/index.js?mode=quit" title="">Quit</a></li>
</li>
</ul>
</div>
</body>
</html>
P.S. If you have a way to make the code even tighter, that's way cool too.