в 09:21, 26 мая 2010

2010-05-26T09:21:00Z

Admin: 1 версия

2010-05-26T08:16:51Z

1 версия

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

==CSS tab based navigational bar==



<source lang="html4strict">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#navsite h5 {
display: none;
}
#navsite ul {
padding: 3px 0;
margin-left: 0;
border-bottom: 1px solid #669;
}
#navsite ul li {
list-style: none;
margin: 0;
display: inline;
}
#navsite ul li a {
padding: 3px 0.5em;
margin-left: 3px;
border: 1px solid #669;
border-bottom: none;
background: #ccf;
text-decoration: none;
}
#navsite ul li a:link {
color: #339;
}
#navsite ul li a:visited {
color: #666;
}
#navsite ul li a:link:hover, #navsite ul li a:visited:hover {
color: #000;
background: #AAE;
border-color: #336;
}
#navsite ul li a#current {
background: white;
border-bottom: 1px solid white;
}
</style>
</head>
<body>
<div id="navsite">
<ul>
<li><a href="http://www.wbex.ru">Home</a></li>
<li><a href="http://www.wbex.ru">Home</a></li>
<li><a href="http://www.wbex.ru">Home</a></li>
<li><a href="http://www.wbex.ru">Home</a></li>
<li><a href="http://www.wbex.ru" id="current">Home</a></li>
<li><a href="http://www.wbex.ru">Home</a></li>
</ul>
</div>
</body>
</html>
</source>

==Expandable left bar==



<source lang="html4strict">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#menulink {
display: none;
}
a:link {
color: #777;
text-decoration: none;
}
a:visited {
color: #333;
text-decoration: none;
}
a:link:hover, a:visited:hover {
color: #777;
background-color: #ccc;
}
a:link:active, a:visited:active {
color: #ccc;
background-color: #ccc;
}
</style>
<script type="text/javascript">
function toggle(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>
<div id="navsite">
<ul>
<li><a href="http://www.wbex.ru">Home</a></li>
<li><a href="http://www.wbex.ru">Home</a></li>
<li><a href="http://www.wbex.ru">Home</a></li>
<li><a href="http://www.wbex.ru">Home</a></li>
<li><a href="http://www.wbex.ru">Home</a></li>
<li><a href="http://www.wbex.ru">Home</a></li>
</ul>
<h5><a href="#" onclick="return toggle("menulink");">Links (+/-)(Click me to expand)</a></h5>
<ul id="menulink">
<li><a href="http://www.wbex.ru">Home</a></li>
<li><a href="http://www.wbex.ru">Home</a></li>
<li><a href="http://www.wbex.ru">Home</a></li>
<li><a href="http://www.wbex.ru">Home</a></li>
<li><a href="http://www.wbex.ru">Home</a></li>
</ul>
</div>
</body>
</html>
</source>

==Horizontal menu==



<source lang="html4strict">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#header {
float: left;
width: 100%;
background-color: white;
padding-top: 0;
margin-top: 0;
background: #ccc;
}
#header h5 {
display: none;
}
#header ul {
margin: 0;
padding: 10px 10px 0;
list-style: none;
}
#header li {
float: left;
margin: 0;
padding: 0;
}
#header a {
display: block;
}
#header li {
float: left;
background: yellow;
margin: 0;
padding: 0;
}
#header a {
display: block;
background: gold;
padding: 5px 15px;
color: #ccc;
text-decoration: none;
}
#header #current {
background: red;
}
#header #current a {
background: pink;
color: black;
}
</style>
</head>
<body>
<div id="header">
<ul>
<li><a href="http://www.wbex.ru">Home</a></li>
<li><a href="http://www.wbex.ru">Home</a></li>
<li><a href="http://www.wbex.ru">Home</a></li>
<li><a href="http://www.wbex.ru">Home</a></li>
<li id="current"><a href="http://www.wbex.ru">Home</a></li>
<li><a href="http://www.wbex.ru">Home</a></li>
</ul>
</div>
</body>
</html>
</source>

==Horizontal menu with list==



<source lang="html4strict">

<!DOCTYPE html PUBLIC "-//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" media="all">
li a {
padding: 2px;
color: black;
font-size: 15pt;
text-decoration: none;
}
li a:link {
background-color: white;
color: black;
}
li a:visited {
background-color: black;
color: white;
}
li a:active {
background-color: lightgray;
color: black;
}
li a:hover, li a:focus {
background-color: gray;
color: white;
}
ul {
list-style: none;
}
li {
border: 1px solid black;
padding: 5px;
margin: 2px;
float: left;
}

</style>
</head>
<body>
<ul>
<li><a href="">DDDD</a></li>
<li><a href="">CCCC</a></li>
<li><a href="">BBBB</a></li>
<li><a href="">AAAA</a></li>
</ul>
</body>
</html>
</source>

==Horizontal navigation bar with anchor and list==



<source lang="html4strict">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Nav Bar Example</title>
<style rel="stylesheet" type="text/css">
body {
background-color: #ffffff;
}
a:link,a:visited {
text-decoration: none;
font-size: 12px;
font-weight: bold;
color: #000000;
}
#topNav {
width: 800px;
position: relative;
top: 10px;
left: 10px;
background: red;
height: 32px;
color: #cccccc;
padding: 0px;
margin: 0px;
}
#linkContainer {
position: absolute;
top: 10px;
left: 10px;
height: 16px;
padding: 0px;
margin: 0px;
z-index: 1;
}
a.topNavLink {
padding: 0px 5px 0px 5px;
border-right: 1px solid #666666;
}
a#lastItem {
border-right: none;
}
a.topNavLink:hover {
background: gold;
}
</style>
</head>
<body>
<div id="topNav">
<div id="linkContainer">
<a href="#" class="topNavLink">Home</a>
<a href="#" class="topNavLink">Products</a>
<a href="#" class="topNavLink">Services</a>
<a href="#" class="topNavLink">About Us</a>
<a href="#" id="lastItem" class="topNavLink">Contact Us</a>
</div>
</div>
</body>
</html>
</source>

==Left bar menu==



<source lang="html4strict">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#navsite {
font-size: 0.7em;
width: 12em;
border-right: 1px solid #666;
padding: 0 0 0 0;
margin-bottom: 1em;
float: left;
}
#navsite ul {
list-style: none;
}
#navsite ul li {
border-top: 1px solid #003;
}
#navsite ul li a {
display: block;
padding: 2px 2px 2px 0.5em;
border-left: 10px solid #369;
border-right: 1px solid #69c;
border-bottom: 1px solid #369;
background-color: #036;
color: #fff;
text-decoration: none;
width: 100%;
}
html>body #navsite ul li a {
width: auto;
}
#navsite ul li a:hover {
border-left: 10px solid #036;
border-right: 1px solid #69c;
border-bottom: 1px solid #369;
background-color: #69f;
color: #fff;
}
a {
border-left: 10px solid #f33;
border-right: 1px solid #f66;
border-bottom: 1px solid #f33;
background-color: #fcc;
color: #333;
}
</style>

</head>
<body id="pagespk">
<div id="navsite">
<ul>
<li><a href="http://www.wbex.ru" >Home</a></li>
<li><a href="http://www.wbex.ru" >About</a></li>
<li><a href="http://www.wbex.ru" >Archives</a></li>
<li><a href="http://www.wbex.ru" >Writing</a></li>
<li><a href="http://www.wbex.ru" >Speaking</a></li>
<li><a href="http://www.wbex.ru" >Contact</a></li>
</ul>
</div>
</body>
</html>
</source>

==Left navigation bar==



<source lang="html4strict">

<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style rel="stylesheet" type="text/css">
div#navigation {
float: left;
width: 200px;
height: 100%;
color: #ffffff;
background-color: #666;
border: 1px solid #000;
padding: 5px;
}
a {
display: block;
text-decoration: none;
}
</style>
</head>
<body>
<div id="navigation">
<a href="">Navigation item 1</a>
<a href="">Navigation item 2</a>
<a href="">Navigation item 3</a>
<a href="">Navigation item 4</a>
</div>
</body>
</html>
</source>

==Negative Margins example==



<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>Negative Margins example</title>
<meta http-equiv="Content-Type" content-wrapper="text/html; charset=ISO-8859-1" />
<style type="text/css">
#wrapper {
text-align: left;
width: 770px;
margin: 10px auto 0 auto;
border: 1px solid silver;
}
#header {
background: red;
padding: 10px 15px 10px 13px;
}
#content-wrapper {
width: 100%;
background: gold;
float: left;
margin-right: -200px;
}
#content-inner {
margin-right: 200px;
padding: 5px 15px 0 15px;
}
#navigation {
width: 200px;
float: right;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">header</div>
<div id="content-wrapper">
<div id="content-inner">
<p>this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. </p>
</div>
</div>
<div id="navigation">
<ul>
<li><a href="">Day 1</a></li>
<li><a href="">Day 2</a></li>
<li><a href="">Day 3</a></li>
<li><a href="">Day 4</a></li>
<li><a href="">Day 5</a></li>
</ul>
</div>
</div>
</body>
</html>
</source>

==Nested List style==



<source lang="html4strict">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
a:link {
color: #777;
text-decoration: none;
}
a:link:visited {
color: #333;
}
a:link:hover {
color: #777;
background-color: #ccc;
}
a:link:active {
color: #ccc;
background-color: #ccc;
}

#myNav {
background-color: #eee;
padding: 4px;
}
#myNav h3 {
display: none;
}
#myNav ul {
display: inline;
padding-left: 0;
margin-left: 0;
}
#myNav ul li {
display: inline;
}
#myNav ul li a:link {
padding: 4px;
}
#myNav ul ul li:before {
content: ">";
}
</style>
</head>
<body>
<div id="myNav">
<ul>
<li><a href="http://www.wbex.ru">Home</a>
<ul>
<li><a href="http://www.wbex.ru">Home</a>
<ul>
<li><a href="http://www.wbex.ru">Home</a>
<ul>
<li><a href="http://www.wbex.ru">Home</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
</source>

==One column with top navigation bar==



<source lang="html4strict">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>CSS Positioning Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style rel="stylesheet" type="text/css">
div {
width: 800px;
border: 1px solid #000;
margin: 1px;
padding: 5px;
}
div#masthead {
height: 100px;
background-color: #d6d;
}
div#navigation {
height: 40px;
background-color: #666;
color: #fff;
}
div#body {
height: 100%;
background-color: #fff;
}
</style>
</head>
<body>
<div id="masthead"><h1>Masthead</h1></div>
<div id="navigation">
<span class="navItem">Navigation item 1</span> |
<span class="navItem">Navigation item 2</span> |
<span class="navItem">Navigation item 3</span> |
<span class="navItem">Navigation item 4</span>
</div>
<div id="body"><h1>Headline</h1><p>Article goes here</p></div>
</body>
</html>
</source>

==Right navigation bar==



<source lang="html4strict">

<html>
<head><title></title>
<style type="text/css">
#columnLeft {
margin-top: 0;
padding-top: 0;
float: left;
width: 67%;
background:#fff;
margin-right: 1.67em;
padding-bottom: 20px;
border-right: 1px solid black;
padding-right: 1em;
}
#columnRight {
padding-left: 2em;
margin-top: 0;
padding-top: 0;
}
h1 {
margin-top: 0;
padding-top: 0;
}
li {
list-style: none;
}
#footer {
clear: both;
padding-bottom: 1em;
border-top: 1px solid #333;
text-align: center;
}
</style>
</head><body>
<div id="columnLeft">
<h1>Heading 1</h1>
<h2><a href="">Heading 2</a></h2>
<p>Text <a href="http://www.wbex.ru">link</a></p>
<p>Text <a href="">Link</a></p>
</div>
<div id="columnRight">
<p>Text</p>
<div id="navsite">
<h5>Site Navigation:</h5>
<ul>
<li><a href="" id="current">Home</a></li>
<li><a href="">Products</a></li>
<li><a href="">Services</a></li>
<li><a href="">About Us</a></li>
<li><a href="">Contact</a></li>
</ul>
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text.</p>
</div>

</div>
<div id="footer">
<p>Copyright 2008</p>
</div>
</body>
</html>
</source>

==Styled tab navigation==



<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>Styled tab navigation</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#wrapper {
text-align: left;
border: 1px solid #033;
position: relative;
font-size: 1.4em;
}
#header {
background: #033;
color: #fff;
height: 55px;
position: relative;
}
#header h1,#header h2 {
position: absolute;
padding: 0;
margin: 0;
}
#header h1 {
top: 5px;
left: 8px;
height: 50px;
background: gold;
}
#header h2 {
top: 20px;
left: 193px;
}
#headerlinks {
float: right;
font-size: 0.8em;
background: red;
padding: 6px 6px 8px 10px;
}

#headersearch form {
padding: 0;
margin: 0;
}
#headersearch {
position: absolute;
top: 2em;
right: 5px;
}
#headersearch form input {
padding: 0;
margin: 0;
vertical-align: middle;
}
#txtSearch {
height: 17px;
width: 115px;
border: 1px solid black;
}
#tablinks {
background: #336868;
}
#tablinks div {
float: left;
border-right: 1px solid #094747;
}
#tablinks a {
display: block;
padding: 5px 10px;
}
#tablinks a.current {
background: #ccc;
}
</style>
</head>
<body id="cols3">
<div id="wrapper">
<div id="header">
<h1>header 1</h1>
<h2>header 2</h2>
<div id="headerlinks">
<a href="">Contact Us</a> |
<a href="">Site Map</a> |
<a href="">Store Locator</a></div>
<div id="headersearch"><form><input type="text" name="txtSearch" id="txtSearch" />
<input value="Search" type="button"/></form></div>
</div>

<div id="tablinks" class="clearfix">
<div><a href="">Home</a></div>
<div><a href="" class="current">Travel</a></div>
<div><a href="">Flights</a></div>
<div><a href="">Hotels</a></div>
<div><a href="">Late Deals</a></div>
</div>

</div>
</body>
</html>
</source>

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

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

в 09:21, 26 мая 2010

Admin: 1 версия