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 Right navigation bar
12 Styled tab navigation

CSS tab based navigational bar

 
<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>

Expandable left bar

 
<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>

Horizontal menu

 
<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>

Horizontal menu with list

 
<!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>

Horizontal navigation bar with anchor and list

 
<!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>

Left bar menu

 
<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>

Left navigation bar

 

<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>

Negative Margins example

 
<!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>

Nested List style

 
<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>

One column with top navigation bar

 

<!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>

Right navigation bar

 
<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>

Styled tab navigation

 
<!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>

HTML/CSS/CSS Controls/Navigation Bar

Содержание

CSS tab based navigational bar

Expandable left bar

Horizontal menu

Horizontal menu with list

Horizontal navigation bar with anchor and list

Left bar menu

Left navigation bar

Negative Margins example

Nested List style

One column with top navigation bar

Right navigation bar

Styled tab navigation

Навигация

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

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

Варианты

Просмотры

Ещё

Поиск

Разделы

Навигация

Инструменты