HTML/CSS/CSS Controls/Menu

Содержание

1 CSS only menu with mouse over
2 fixed width floated menu
3 Left bar menu list
4 Menu bar with highlight
5 Menu with highlight
6 Mouse hover left bar
7 Tab Menu
8 Use show or hide UL with link
9 Use UL and LI to wrap link menu

CSS only menu with mouse over

 


<!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">
<ul id="navlist">
  <li class="active"><a href="#">Link 1</a></li>
  <li><a href="">Link 2<span>Link 1</span></a></li>
  <li><a href="">Link 3<span>Link 1</span></a></li>
  <li><a href="">Link 4<span>Link 1</span></a></li>
  <li><a href="">Link 5<span>Link 1</span></a></li>
  <li><a href="">Link 6<span>Link 1</span></a></li>
</ul>
</body>
</html>

fixed width floated menu

 
<!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>
<h2>Example below of fixed width floated menu</h2>
<ul id="nav2">
  <li class="selected"><a href="" title="">Home</a></li>
  <li><a href="">About Us</a></li>
  <li><a href="">Contact</a></li>
  <li><a href="">More</a></li>
  <li class="last"><a href="">Stuff</a></li>
</ul>
</body>
</html>

Left bar menu list

 
<!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>
        <div id="content">
            <div id="nav">
                <ul>
                    <li><a href="#">A</a></li>
                    <li><a href="#">B</a></li>
                    <li><a href="#">C</a></li>
                    <li><a href="#">D</a></li>
                    <li><a href="#">E</a></li>
                    <li><a href="#">F</a></li>
                    <li><a href="#">G</a></li>
                </ul>
            </div>
        </div>
    </body>
</html>

Menu bar with highlight

 

<!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>
<ul>
  <li><a href="#">A<span class="a"></span></a></li>
  <li><a href="#">B<span class="b"></span></a></li>
  <li><a href="#">C<span class="c"></span></a></li>
  <li><a href="#">D<span class="d"></span></a></li>
  <li><a href="#">E<span class="e"></span></a></li>
  <li><a href="#">F<span class="f"></span></a></li>
</ul>
</body>
</html>

Menu with highlight

 

<!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>
<ul>
  <li><a href="">A<span class="f"></span></a></li>
  <li><a href="">B</span><span class="e"></span></a></li>
  <li><a href="">C<span class="d"></span></a></li>
  <li><a href="">D<span class="c"></span></a></li>
  <li><a href="">E<span class="b"></span></a></li>
  <li><a href="">F<span class="a"></span></a></li>
</ul>
</body>
</html>

Mouse hover left bar

 
<!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>
<ul>
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li><a href="#">Link 3</a></li>
  <li><a href="#">Link 4</a></li>
  <li><a href="#">Link 5</a></li>
  <li><a href="#">Link 6</a></li>
</ul>
</body>
</html>

Tab Menu

 

<!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=utf-8" />
    <title></title>
<style type="text/css" media="Screen">
ul.tabs a {
  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>
    <ul class="tabs"> 
        <li class="selected"><h3 class="tab-label"><a href="">Tab 1</a></h3></li> 
        <li><h3 class="tab-label"><a href="">Tab 2</a></h3></li> 
        <li><h3 class="tab-label"><a href="">Tab 3</a></h3></li> 
        <li><h3 class="tab-label"><a href="">Tab 4</a></h3></li> 
    </ul> 
</body>
</html>

Use show or hide UL with link

 

<!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>
<title></title>
<style type="text/css">
#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>
  <h5><a href="#" onclick="return showOrHide("menulink");">click to show or hide menu</a></h5>
  <ul id="menulink">
   <li><a href="">O</a></li>
   <li><a href="">S</a></li>         
   <li><a href="">A</a></li>
   <li><a href="">M</a></li>
   <li><a href="">M</a></li> 
  </ul>
  
</body>
</html>

Use UL and LI to wrap link menu

 

<!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>
   <p>
   <a href="">Home</a> | 
   <a href="">About</a> | 
   <a href="">Contact</a> 
   </p>
<ul>
  <li><a href="">Home</a></li>
  <li><a href="">About</a></li>
  <li><a href="">Contact</a></li>
</ul>
</body>
</html>

HTML/CSS/CSS Controls/Menu

Содержание

CSS only menu with mouse over

fixed width floated menu

Left bar menu list

Menu bar with highlight

Menu with highlight

Mouse hover left bar

Tab Menu

Use show or hide UL with link

Use UL and LI to wrap link menu

Навигация

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

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

Варианты

Просмотры

Ещё

Поиск

Разделы

Навигация

Инструменты