HTML/CSS/CSS Controls/Menu

Содержание

1 CSS only menu with mouse over
2 fixed width floated menu
3 Example below of fixed width floated menu
4 Left bar menu list
5 Menu bar with highlight
6 Menu with highlight
7 Mouse hover left bar
8 Tab Menu
9 Use show or hide UL with link
- 9.1 <a href="#" onclick="return showOrHide("menulink");">click to show or hide menu</a>
10 Use UL and LI to wrap link menu

CSS only menu with mouse over

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> ul#navlist{

 margin: 0;
 padding: 0;
 list-style-type: none;
 width:160px; 
 border:1px solid red; 
 border-top:2px solid red;
 position:absolute;
 left:100px;
 top:50px;

} ul#navlist a {

 display: block;
 width: 100%;
 background-color: #aaa;
 text-decoration: none;
 border-bottom: 2px solid red;

} ul#navlist a span {

 position:absolute;
 left:0px;
 top:0px;
 width:100%;
 background-color: #eee;
 border-bottom: 1px solid red;
 visibility:hidden;

} ul#navlist li.active a {

   background:#ffffcc;
   color:red;
   border-top:1px solid red;
   margin-top:-4px

} ul#navlist li a:hover {

   background: #FFFFcc;
   color:black;
   visibility:visible

} </style> </head> <body id="page1">

</body> </html>

</source>

fixed width floated menu

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> ul#nav2 {

   list-style: none;
 border-top: 2px solid silver;
 border-bottom: 2px solid silver;
 background:#ffffcc;
 white-space:nowrap;
 height:1.7em;
 width:750px;
 text-align:center;
 margin-left:auto;
 margin-right:auto;

}

nav2 li {

 float:left;
 background:#ffffcc;
 width:20%;
 white-space:nowrap;

}

nav2 a {

 border-left:2px solid silver;
 line-height:1.7em;
 height:1.7em;
 background:#f2f2f2;
 position:relative;
 text-decoration:none;
 display:block;

}

nav2 a:hover {

   background:blue;
   color:white;

} ul#nav2 li.selected a{

   background:blue;
   color:white;

} ul#nav2 li.last a{

   border-right:2px solid silver;

}

html ul#nav2 li.last{

   width:auto;

} </style> </head> <body>

Example below of fixed width floated menu

<a href="" title="">Home</a>
<a href="">About Us</a>
<a href="">Contact</a>
<a href="">More</a>
<a href="">Stuff</a>

</body> </html>

</source>

Left bar menu list

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-/pp/W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html>

   <head>
       <title></title>
       <style type="text/css">
           div#nav {
               float: left;
               display: inline;
               margin-left: 10px;
               background: gold;
               width: 150px;
               border: 1px solid black;
           }
           div#nav ul {
               list-style: none;
               padding: 0;
               margin: 0;
           }
           div#nav a {
               color: black;
               display: block;
               width: 100%;
               margin: 4px;
               padding: 4px;
               text-decoration: none;
               border: 1px solid black;
           }
           div#nav a:hover {
               border: 1px solid black;
               background: yellow;
               color: white;   
           }
       </style>
   </head>
   <body>

<a href="#">A</a>
<a href="#">B</a>
<a href="#">C</a>
<a href="#">D</a>
<a href="#">E</a>
<a href="#">F</a>
<a href="#">G</a>

   </body>

</html>

</source>

Menu bar with highlight

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title> XHTML 1.0 Shell - Strict Specification </title> <meta http-equiv="content-type" content="text/html;charset=iso-8859-1" /> <style type="text/css"> ul {

 margin: 0;
 padding: 0;
 width: 100px;
 list-style: none;
 position: relative;

} li {

 padding-right: 5px

} ul li a {

 display: block;
 text-decoration: none;

} ul li a:hover {

 background-color: #ddd;

} span {

 visibility: hidden;
 position: absolute;
 width: 5px;
 height: 120px;
 right: 0;
 top: 0

} span.a {

 background: red;

} span.b {

 background: green;

} span.c {

 background: blue;

} span.d {

 background: yellow;

} span.e {

 background: pink;

} span.f {

 background: orange;

} ul li a:hover span {

 visibility: visible

} </style> </head> <body>

<a href="#">A</a>
<a href="#">B</a>
<a href="#">C</a>
<a href="#">D</a>
<a href="#">E</a>
<a href="#">F</a>

</body> </html>

</source>

Menu with highlight

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html;charset=iso-8859-1" /> <style type="text/css"> ul {

 width: 100px;
 list-style: none;
 position: relative;

} li {

 padding-right: 5px

} ul li a {

 display: block;
 background-color: #eee;
 text-indent: 5px;
 height: 20px;
 line-height: 20px;
 color: #000;
 text-decoration: none;

} ul li a:hover {

 background-color: #ccc;

} span {

 visibility: hidden;
 position: absolute;
 width: 5px;
 height: 20px;
 right: 0;

} span.a {

 background: red;
 top: 0

} span.b {

 background: green;
 top: 20px

} span.c {

 background: blue;
 top: 40px

} span.d {

 background: yellow;
 top: 60px

} span.e {

 background: pink;
 top: 80px

} span.f {

 background: orange;
 top: 100px

} ul li a:hover span {

 visibility: visible

} </style> </head> <body>

<a href="">A</a>
<a href="">B</span></a>
<a href="">C</a>
<a href="">D</a>
<a href="">E</a>
<a href="">F</a>

</ul> </body> </html>

</source>

Mouse hover left bar

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> ul, li {

 padding:0;
 margin:0;
 list-style:none;
 line-height:20px;

} li {

 background:#aaa;
 width:200px;
 margin-left:20px;

} a {

 padding-left:20px;
 display:block;
 text-decoration:none;
 position:relative;
 background:#fff;

} a:hover {

   background:transparent;

} </style> </head> <body>

<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
<a href="#">Link 5</a>
<a href="#">Link 6</a>

</body> </html>

</source>

Tab Menu

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
   <title></title>

 display: block;
 text-decoration: none;

} ul.tabs {

 float: left;
 width: 100%;
 padding: 0;
 margin: 0;
 border-bottom: 1px solid gold;
 margin-bottom: 10px;

} ul.tabs li {

 float: left;
 width: 25%;
 list-style-type: none;

} ul.tabs * .tab-label {

 border: 1px solid black;
 margin: 0;
 padding-bottom: 2px;
 padding-top: 2px;
 text-align: center;
 background: pink;

} ul.tabs li.selected * .tab-label {

 position: relative;
 border-bottom: none;
 top: 1px;
 padding-bottom: 4px;
 padding-top: 5px;
 border-top: 2px solid gold;
 margin-top: -5px;
 font-weight: bold;
 background: red;

} </style> </head> <body>

<a href="">Tab 1</a>
<a href="">Tab 2</a>
<a href="">Tab 3</a>
<a href="">Tab 4</a>

</body> </html>

</source>

Use show or hide UL with link

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

menulink {

display: none;

} </style> <script language="JavaScript"> function showOrHide(zap) {

if (document.getElementById) {
 var abra = document.getElementById(zap).style;
 if (abra.display == "block") {
  abra.display = "none";
  } else {
  abra.display = "block";
 } 
 return false;
 } else {
 return true;
}

} </script> </head> <body>

<a href="#" onclick="return showOrHide("menulink");">click to show or hide menu</a>

<a href="">O</a>
<a href="">S</a>
<a href="">A</a>
<a href="">M</a>
<a href="">M</a>

</body> </html>

</source>

Use UL and LI to wrap link menu

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title>horizontal menus</title> <style type="text/css"> ul {

 list-style-type: none;

} li {

 border-right: 1px solid;
 display: inline;
 padding-right: 0.5em;
 margin-right: 0.5em;

} </style> </head> <body>

<a href="">Home</a> | <a href="">About</a> | <a href="">Contact</a>

<a href="">Home</a>
<a href="">About</a>
<a href="">Contact</a>

</body> </html>

</source>

HTML/CSS/CSS Controls/Menu

Содержание

CSS only menu with mouse over

fixed width floated menu

Example below of fixed width floated menu

Left bar menu list

Menu bar with highlight

Menu with highlight

Mouse hover left bar

Tab Menu

<a href="">Tab 1</a>

<a href="">Tab 2</a>

<a href="">Tab 3</a>

<a href="">Tab 4</a>

Use show or hide UL with link

<a href="#" onclick="return showOrHide("menulink");">click to show or hide menu</a>

Use UL and LI to wrap link menu

Навигация

Персональные инструменты

Пространства имён

Варианты

Просмотры

Ещё

Поиск

Разделы

Навигация

Инструменты