HTML/CSS/CSS Controls/List menu

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

Expandable left list based 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">

  1. navigation ul {
 list-style-type: none;
 padding: 0;
 margin: 0;
 width: 140px;

}

  1. navigation a {
 text-decoration: none;
 display: block;
 padding: 3px 12px 3px 8px;
 background-color: #666;
 color: #fff;
 border: 1px solid #ddd;

}

  1. navigation a:active {
 padding: 2px 13px 4px 7px;
 background-color: #444;
 color: #eee;
 border: 1px solid #333;

}

  1. navigation li li a {
 text-decoration: none;
 padding: 3px 3px 3px 17px;
 background-color: #999;
 color: #111111;

}

  1. navigation li li a:active {
 padding: 2px 4px 4px 16px;
 background-color: #888;
 color: #000;

} </style> <script type="text/javascript"> function swap(targetId){ 

 if (document.getElementById){
       target = document.getElementById(targetId);
           if (target.style.display == "none"){
               target.style.display = "";
           } else{
               target.style.display = "none";
           }
               
 }

} </script> </head> <body>

</body> </html> 

</source>


Horizontal list 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></title> <style type="text/css"> li { 

 border: 1px solid;
   float: left;
   list-style-type: none;
   padding: 0.2em 1em;

} </style> </head> <body>

  • <a href="">Home</a>
  • <a href="">Contact</a>
  • <a href="">About</a>
  • <a href="">Archive</a>

</body> </html> 

</source>


Left list menu and three columns

   <source lang="html4strict">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> 

 <title>CSS Positioning Example</title>
 <style rel="stylesheet" type="text/css">
  1. page {
 position: absolute;
 top: 10px;
 left: 10px;
 width: 800px;
 background-color: #fff;

}

  1. masthead {
 border-bottom: 1px solid black;

}

  1. sideNav {
 float: left;
 width: 150px;
 background-color: #ccc;
 border-bottom: 1px solid black;

}

  1. sideRight {
 float: right;
 width: 150px;
 padding: 0px;
 background-color: #aaa;
 border-bottom: 1px solid black;

}

  1. content {
 margin: 0px 150px 0px 150px;
 border-left: 1px solid #ccc;
 border-right: 1px solid #ccc;

} .item { 

 padding: 10px;
 min-height: 75px;
 height: 75px;

}

  1. sideNav a:link,#sideNav a:visited {
 display: block;
 padding: 5px;

}

  1. sideNav a:hover {
 background-color: #eee;

} </style> </head> <body>

Masthead

   <a href="#">Left link one</a>
   <a href="#">Left link two</a>
   <a href="#">Left link three</a>
   <a href="#">Left link four</a>

    Lorem ipsum dolor sit amet.

Item One

This is a test.

Item Two

This is a test.

</body> </html> 

</source>


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

  1. navigation ul {
 list-style-type: none;
 padding: 0;
 margin: 0;
 width: 140px;
 font-size: 100%;

}

  1. navigation a {
 text-decoration: none;
 display: block;
 padding: 3px 12px 3px 8px;
 background-color: #666;
 color: #fff;
 border-top: 1px solid #ddd;
 border-right: 1px solid #333;
 border-bottom: 1px solid #333;
 border-left: 1px solid #ddd;

}

  1. navigation a:active {
 padding: 2px 13px 4px 7px;
 background-color: #444;
 color: #eee;
 border-top: 1px solid #333;
 border-right: 1px solid #ddd;
 border-bottom: 1px solid #ddd;
 border-left: 1px solid #333;

}

  1. navigation li li a {
 text-decoration: none;
 padding: 3px 3px 3px 17px;
 background-color: #999;
 color: #111111;

}

  1. navigation li li a:active {
 padding: 2px 4px 4px 16px;
 background-color: #888;
 color: #000;
 border-top: 1px solid #333;
 border-right: 1px solid #ddd;
 border-bottom: 1px solid #ddd;
 border-left: 1px solid #333;

} </style> </head> <body>

</body> </html> 

</source>


Navigational list

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

  1. navigation ul {
 list-style-type: none;
 padding: 0;
 margin: 0;

}

  1. navigation li {
 display: inline;
 font: 12px Arial, sans-serif;
 padding: 0 10px 0 15px;

}

  1. navigation a {
 color: #000000;

} </style> </head> <body>

</body> </html> 

</source>


Put anchor into li

   <source lang="html4strict">

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

 <head>
   <title></title>
   <style type="text/css">
   body {
     margin: 15%;
   }
   a:link {
   color: #777;
   text-decoration: none;
   }
   a:visited {
     color: #333;
     text-decoration: none;
   }
 a:hover, a:hover  {
   color: #777;
   background-color: #ccc;
 }
 a:active, a:active {
   color: #ccc;
   background-color: #ccc;
 }
   </style>
 </head>
 <body>

<a name="europan">Anchor</a>

<a href="http://www.wbex.ru">Link</a> and <a href="http://www.wbex.ru">Another link</a>

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


Unordered list containing hyperlinks

   <source lang="html4strict">

<?xml version = "1.0"?> <!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>Unordered list containing hyperlinks</title>
  </head>
  <body>
  • <a href = "">D</a>
  • <a href = "">W</a>
  • <a href = "">Y</a>
  • <a href = "">C</a>
  </body>

</html> 

</source>
Источник — «http://wbex.ru/index.php?title=HTML/CSS/CSS_Controls/List_menu&oldid=5409»