HTML/CSS/CSS Controls/List menu

Содержание

1 Expandable left list based menu
2 Horizontal list menu
3 Left list menu and three columns
4 List based menu
5 Navigational list
6 Put anchor into li
7 Unordered list containing hyperlinks

Expandable left list based menu

 

<!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">
#navigation ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  width: 140px;
}
#navigation a {
  text-decoration: none;
  display: block;
  padding: 3px 12px 3px 8px;
  background-color: #666;
  color: #fff;
  border: 1px solid #ddd;
}
#navigation a:active {
  padding: 2px 13px 4px 7px;
  background-color: #444;
  color: #eee;
  border: 1px solid #333;
}
#navigation li li a {
  text-decoration: none;
  padding: 3px 3px 3px 17px;
  background-color: #999;
  color: #111111;
}
#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>
    <div id="navigation">
        <ul>
            <li>
                <a href="#" onclick="swap("sectionOneLinks");return false;">Click me</a>
                <ul id="sectionOneLinks" style="display: none;">
                  <li><a href="#">A link to a page</a></li>
                  <li><a href="#">A link to a page</a></li>
                  <li><a href="#">A link to a page</a></li>
                  <li><a href="#">A link to a page</a></li>
                </ul>
            </li>
            <li>
                <a href="#" onclick="swap("sectionTwoLinks");return false;">Click me</a>
                <ul id="sectionTwoLinks" style="display: none;">
                  <li><a href="#">A link to a page</a></li>
                  <li><a href="#">A link to a page</a></li>
                  <li><a href="#">A link to a page</a></li>
                  <li><a href="#">A link to a page</a></li>
                </ul>
            </li>
            <li>
                <a href="#" onclick="swap("sectionThreeLinks");return false;">Click</a>
                <ul id="sectionThreeLinks" style="display: none;">
                  <li><a href="#">A link to a page</a></li>
                  <li><a href="#">A link to a page</a></li>
                  <li><a href="#">A link to a page</a></li>
                  <li><a href="#">A link to a page</a></li>
                </ul>
            </li>
        </ul>
    </div>
</body>
</html>

Horizontal list menu

 
<!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>
<ul>
    <li><a href="">Home</a></li>
    <li><a href="">Contact</a></li>
    <li><a href="">About</a></li>
    <li><a href="">Archive</a> </li>
</ul>
</body>
</html>

Left list menu and three columns

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <title>CSS Positioning Example</title>
  <style rel="stylesheet" type="text/css">
#page {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 800px;
  background-color: #fff;
}
#masthead {
  border-bottom: 1px solid black;
}
#sideNav {
  float: left;
  width: 150px;
  background-color: #ccc;
  border-bottom: 1px solid black;
}
#sideRight {
  float: right;
  width: 150px;
  padding: 0px;
  background-color: #aaa;
  border-bottom: 1px solid black;
}
#content {
  margin: 0px 150px 0px 150px;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
}
.item {
  padding: 10px;
  min-height: 75px;
  height: 75px;
}
#sideNav a:link,#sideNav a:visited {
  display: block;
  padding: 5px;
}
#sideNav a:hover {
  background-color: #eee;
}
</style>
</head>
<body> 
<div id="page"> 
  <div id="masthead"> 
    <h2>Masthead</h2> 
  </div> 
  <div id="sideNav"> 
    <a href="#">Left link one</a>
    <a href="#">Left link two</a>
    <a href="#">Left link three</a>
    <a href="#">Left link four</a>
  </div> 
  <div id="sideRight"> 
     Lorem ipsum dolor sit amet.
  </div> 
  <div id="content"> 
    <div class="item"> 
      <h3>Item One</h3> 
      <p>
       This is a test. 
      </p>
    </div>
    <div class="item"> 
      <h3>Item Two</h3> 
      <p>
       This is a test. 
      </p>
    </div>
  </div> 
</div> 
</body>
</html>

List based menu

 

<!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">
#navigation ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  width: 140px;
  font-size: 100%;
}
#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;
}
#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;
}
#navigation li li a {
  text-decoration: none;
  padding: 3px 3px 3px 17px;
  background-color: #999;
  color: #111111;
}
#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>
    <div id="navigation">
        <ul>
            <li>
                <a href="#">Section one</a>
                <ul><li><a href="#">A link to a page</a></li>
                    <li><a href="#">A link to a page</a></li>
                    <li><a href="#">A link to a page</a></li>
                    <li><a href="#">A link to a page</a></li>
                </ul>
            </li>
            <li>
                <a href="#">Section two</a>
                <ul><li><a href="#">A link to a page</a></li>
                    <li><a href="#">A link to a page</a></li>
                    <li><a href="#">A link to a page</a></li>
                    <li><a href="#">A link to a page</a></li>
                </ul>
            </li>
        </ul>
    </div>
</body>
</html>

Navigational list

 
<!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">
#navigation  ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
#navigation li {
  display: inline;
  font: 12px Arial, sans-serif;
  padding: 0 10px 0 15px;
}
#navigation a {
  color: #000000;
}
</style>
</head>
<body>
    <div id="navigation">
        <ul>
            <li><a href="#">Home page</a></li>
            <li><a href="#">Reviews</a></li>
            <li><a href="#">Live gigs</a></li>
            <li>No Link</li>
        </ul>
    </div>
</body>
</html>

Put anchor into li

 
<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>
  <div id="navsite">
  <p>Link navigation:</p>
  <ul>
   <li><a href="http://www.wbex.ru">Link</a></li>
   <li><a href="http://www.wbex.ru">Link</a></li>
   <li><a href="http://www.wbex.ru">Link</a></li>
    <li><a href="http://www.wbex.ru">Link</a></li>
   <li><a href="http://www.wbex.ru">Link</a></li>
   <li><a href="http://www.wbex.ru">Link</a></li>
  </ul>
  </div>
  <hr />
  <div id="content">
     <h2><a name="europan">Anchor</a></h2>
     <p> <a href="http://www.wbex.ru">Link</a> and <a href="http://www.wbex.ru">Another link</a></p>
  </div>
  </body>
 </html>

Unordered list containing hyperlinks

 
<?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>
      <ul>
         <li><a href = "">D</a></li>
         <li><a href = "">W</a></li>
         <li><a href = "">Y</a></li>
         <li><a href = "">C</a></li>
       </ul>
   </body>
</html>

HTML/CSS/CSS Controls/List menu

Содержание

Expandable left list based menu

Horizontal list menu

Left list menu and three columns

List based menu

Navigational list

Put anchor into li

Unordered list containing hyperlinks

Навигация

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

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

Варианты

Просмотры

Ещё

Поиск

Разделы

Навигация

Инструменты