HTML/CSS/CSS Controls/Navigation Bar
Содержание
- 1 CSS tab based navigational bar
- 2 Expandable left bar
- 3 Horizontal menu
- 4 Horizontal menu with list
- 5 Horizontal navigation bar with anchor and list
- 6 Left bar menu
- 7 Left navigation bar
- 8 Negative Margins example
- 9 Nested List style
- 10 One column with top navigation bar
- 11 Masthead
- 12 Headline
- 13 Heading 1
- 14 header 1
<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>
</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>
</body> </html> </source>
<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>
- <a href="http://www.wbex.ru">Home</a>
- <a href="http://www.wbex.ru">Home</a>
- <a href="http://www.wbex.ru">Home</a>
- <a href="http://www.wbex.ru">Home</a>
- <a href="http://www.wbex.ru">Home</a>
- <a href="http://www.wbex.ru">Home</a>
</body> </html> </source>
<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>
- <a href="">DDDD</a>
- <a href="">CCCC</a>
- <a href="">BBBB</a>
- <a href="">AAAA</a>
</body>
</html>
</source>
<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>
</body> </html>
</source>
<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">
</body> </html> </source>
<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>
</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>
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.
</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>
</body> </html> </source>
<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>
Masthead
Headline
Article goes here
</body> </html>
</source>
<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>
Heading 1
<a href="">Heading 2</a>
Text <a href="http://www.wbex.ru">link</a>
Text <a href="">Link</a>
Text
</body> </html>
</source>
<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">
header 1
header 2
<a href="">Contact Us</a> | <a href="">Site Map</a> |<a href="">Store Locator</a>
</body> </html>
</source>