в 09:21, 26 мая 2010

2010-05-26T09:21:00Z

Admin: 1 версия

2010-05-26T08:16:52Z

1 версия

Новая страница

==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">
<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>
</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>
<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>

</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>
<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>
</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>
<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>
</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>
<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>
</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>
<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>
</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">
<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>
</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">
<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>
</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>
<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>
</source>

← Предыдущая	Версия 09:21, 26 мая 2010
(нет различий)

HTML/CSS/CSS Controls/Menu - История изменений

в 09:21, 26 мая 2010

Admin: 1 версия