How to Create a Flyout Menu
Creating a cohesive flyout menu for your website can mean the difference between showing the world a professional site with easy navigation, or a complicated tangle of links and layers. A flyout menu can be vertical or horizontal, with blocks of color that change with a hover of the mouse, or elaborate pictures and symbols. Flyout menus can make a website pop with excitement. And the best part is, you can create one with a basic knowledge of HTML and a simple text editor.
Other People Are Reading
Instructions
-
-
1
Open your preferred text editor. You can build a flyout menu in Notepad, which can be found in the accessories folder, in any version of Windows.
-
2
Open the HTML file with your text editor where you want to build the menu.
-
-
3
Build nested unordered lists for your main tab and sub tabs. These are comprised of unordered lists (UL) and list items (LI). Make sure you put them after your Body tag.
Here's an example:
<Body>
<div class="cssfly">
<ul>
<li><a href="#">Home</a>
<ul>
<li><a href="#">Sub Home 1</a></li>
<li><a href="#">Sub Home 2</a>
<ul>
<li><a href="#">Sub Home 3</a></li>
</ul>
</li>
</ul>
</li> <!-- end "Home" list item -->
<li><a href="#">Fabulous</a>
<ul>
<li><a href="#">Fabulous 1</a></li>
<li><a href="#">Fabulous 2</a></li>
</ul>
</li> <!-- end "Fabulous" list item -->
</ul>
</div>
</Body>
-
4
Find or create the cascading style sheet in your HTML. The style sheet is a template for your page. The code you'll be inputting here will dictating how the page looks and acts. If you don't have a CSS, create it by using a style tag below your header tag.
Example:
<head>
<title>XYZ</title>
<style type="text/css">
This is where your style sheet code goes.
</style>
</head>
-
5
Write the style sheet code that describes what your menu will look like. You can vary size and color here.
<style type="text/css">
.cssfly {
font-family: arial, sans-serif; width:106px; height:150px;
position:relative; margin:0; font-size:11px; margin:50px 0;
}
.cssfly ul li a, .menu ul li a:visited {
display:block; text-decoration:none;
color:#000; width:104px; height:25px;
text-align:center; border:1px solid #fff;
border-width:1px 1px 0 0; background: #003221; color:#FFFFFF;
line-height:19px; font-size:10px;
}
.cssfly ul {padding:0; margin:0;list-style-type: none; }
.cssfly ul li {float:left; margin-right:1px; position:relative;}
.cssfly ul li ul {display: none;}
-
6
Add the code that makes your menu "fly out." The following code makes the nested LI show up underneath the UL. The hover states describe what the text will look like when the mouse rolls over it.
.cssfly ul li:hover a {color:#fff; background:#000;}
.cssfly ul li:hover ul {
display:block; position:absolute; top:0;
left:105px; width:105px;
}
.cssfly ul li:hover ul li a.hide {
background:#ccc; color:#000;
}
.cssfly ul li:hover ul li:hover a.hide {width:150px;}
.cssfly ul li:hover ul li ul {display: none;}
.cssfly ul li:hover ul li a {
display:block; background:#ccc; color:#000; width:150px;
}
.cssfly ul li:hover ul li a:hover {background:red; color:#000;}
.cssfly ul li:hover ul li:hover ul {
display:block; position:absolute; left:151px; top:0; color:#000;
}
.cssfly ul li:hover ul li:hover ul li a {
display:block; width:200px; background:#dfc184; color:#000;
}
.cssfly ul li:hover ul li:hover ul li a:hover {background:#bd8d5e;
color:#fff;
}
-
7
Save your page. Put your page online and test it in your browser.
-
1
Tips & Warnings
Make sure you close your Style and Head brackets after you've written the CSS code.
References
Resources
- Photo Credit Comstock/Comstock/Getty Images
