HTML/CSS/CSS Controls/List menu — различия между версиями

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

Версия 09:21, 26 мая 2010

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>
Источник — «http://wbex.ru/index.php?title=HTML/CSS/CSS_Controls/List_menu&oldid=5408»