HTML/CSS/CSS Controls/Navigation Bar

Материал из Web эксперт
Перейти к: навигация, поиск

CSS tab based navigational bar

   <source lang="html4strict">

<html xmlns="http://www.w3.org/1999/xhtml">

 <head>
   <title></title>
   <style type="text/css">
  1. navsite h5 {
 display: none;

}

  1. navsite ul {
 padding: 3px 0;
 margin-left: 0;
 border-bottom: 1px solid #669;

}

  1. navsite ul li {
 list-style: none;
 margin: 0;
 display: inline;

}

  1. navsite ul li a {
 padding: 3px 0.5em;
 margin-left: 3px;
 border: 1px solid #669;
 border-bottom: none;
 background: #ccf;
 text-decoration: none;

}

  1. navsite ul li a:link {
 color: #339;

}

  1. navsite ul li a:visited {
 color: #666;

}

  1. navsite ul li a:link:hover, #navsite ul li a:visited:hover {
 color: #000;
 background: #AAE;
 border-color: #336;

}

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


Horizontal menu

   <source lang="html4strict">

<html xmlns="http://www.w3.org/1999/xhtml">

 <head>
   <title></title>
   <style type="text/css">
  1. header {
 float: left;
 width: 100%;
 background-color: white;
 padding-top: 0;
 margin-top: 0;
 background: #ccc;

}

  1. header h5 {
 display: none;

}

  1. header ul {
 margin: 0;
 padding: 10px 10px 0;
 list-style: none;

}

  1. header li {
 float: left;
 margin: 0;
 padding: 0;

}

  1. header a {
 display: block;

}

  1. header li {
 float: left;
 background: yellow;
 margin: 0;
 padding: 0;

}

  1. header a {
 display: block;
 background: gold;
 padding: 5px 15px;
 color: #ccc;
 text-decoration: none;

}

  1. header #current {
 background: red;

}

  1. header #current a {
 background: pink;
 color: black;

} </style>

 </head>
 <body>
 </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>
  • <a href="">DDDD</a>
  • <a href="">CCCC</a>
  • <a href="">BBBB</a>
  • <a href="">AAAA</a>
   </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;

}

  1. topNav {
 width: 800px;
 position: relative;
 top: 10px;
 left: 10px;
 background: red;
 height: 32px;
 color: #cccccc;
 padding: 0px;
 margin: 0px;

}

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


Left bar menu

   <source lang="html4strict">

<html xmlns="http://www.w3.org/1999/xhtml">

 <head>
   <title></title>
   <style type="text/css">
  1. navsite {
 font-size: 0.7em;
 width: 12em;
 border-right: 1px solid #666;
 padding: 0 0 0 0;
 margin-bottom: 1em;
 float: left;

}

  1. navsite ul {
 list-style: none;

}

  1. navsite ul li {
 border-top: 1px solid #003;

}

  1. 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;

}

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


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>

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

  1. wrapper {
 text-align: left;
 width: 770px;
 margin: 10px auto 0 auto;
 border: 1px solid silver;

}

  1. header {
 background: red;
 padding: 10px 15px 10px 13px;

}

  1. content-wrapper {
 width: 100%;
 background: gold;
 float: left;
 margin-right: -200px;

}

  1. content-inner {
 margin-right: 200px;
 padding: 5px 15px 0 15px;

}

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


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>

Masthead

Headline

Article goes here

</body> </html>

</source>
   
  


Right navigation bar

   <source lang="html4strict">

<html>

 <head><title></title>

<style type="text/css">

  1. 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;

}

  1. columnRight {
 padding-left: 2em;
 margin-top: 0;
  padding-top: 0;

} h1 {

   margin-top: 0;
   padding-top: 0;

} li {

 list-style: none;

}

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


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

  1. wrapper {
 text-align: left;
 border: 1px solid #033;
 position: relative;
 font-size: 1.4em;

}

  1. header {
 background: #033;
 color: #fff;
 height: 55px;
 position: relative;

}

  1. header h1,#header h2 {
 position: absolute;
 padding: 0;
 margin: 0;

}

  1. header h1 {
 top: 5px;
 left: 8px;
 height: 50px;
 background: gold;

}

  1. header h2 {
 top: 20px;
 left: 193px;

}

  1. headerlinks {
 float: right;
 font-size: 0.8em;
 background: red;
 padding: 6px 6px 8px 10px;

}

  1. headersearch form {
 padding: 0;
 margin: 0;

}

  1. headersearch {
 position: absolute;
 top: 2em;
 right: 5px;

}

  1. headersearch form input {
 padding: 0;
 margin: 0;
 vertical-align: middle;

}

  1. txtSearch {
 height: 17px;
 width: 115px;
 border: 1px solid black;

}

  1. tablinks {
 background: #336868;

}

  1. tablinks div {
 float: left;
 border-right: 1px solid #094747;

}

  1. tablinks a {
 display: block;
 padding: 5px 10px;

}

  1. tablinks a.current {
 background: #ccc;

} </style> </head> <body id="cols3">

</body> </html>

</source>