http://wbex.ru/index.php?action=history&feed=atom&title=HTML%2FCSS%2FCSS_Controls%2FList_menu
HTML/CSS/CSS Controls/List menu - История изменений
2026-04-05T18:19:44Z
История изменений этой страницы в вики
MediaWiki 1.30.0
http://wbex.ru/index.php?title=HTML/CSS/CSS_Controls/List_menu&diff=5408&oldid=prev
в 09:21, 26 мая 2010
2010-05-26T09:21:00Z
<p></p>
<table class="diff diff-contentalign-left" data-mw="interface">
<tr style="vertical-align: top;" lang="ru">
<td colspan="1" style="background-color: white; color:black; text-align: center;">← Предыдущая</td>
<td colspan="1" style="background-color: white; color:black; text-align: center;">Версия 09:21, 26 мая 2010</td>
</tr><tr><td colspan="2" style="text-align: center;" lang="ru"><div class="mw-diff-empty">(нет различий)</div>
</td></tr></table>
http://wbex.ru/index.php?title=HTML/CSS/CSS_Controls/List_menu&diff=5409&oldid=prev
Admin: 1 версия
2010-05-26T08:16:53Z
<p>1 версия</p>
<p><b>Новая страница</b></p><div>==Expandable left list based menu==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="content-type" content="text/html; charset=utf-8" /><br />
<title></title><br />
<style type="text/css" media="Screen"><br />
#navigation ul {<br />
list-style-type: none;<br />
padding: 0;<br />
margin: 0;<br />
width: 140px;<br />
}<br />
#navigation a {<br />
text-decoration: none;<br />
display: block;<br />
padding: 3px 12px 3px 8px;<br />
background-color: #666;<br />
color: #fff;<br />
border: 1px solid #ddd;<br />
}<br />
#navigation a:active {<br />
padding: 2px 13px 4px 7px;<br />
background-color: #444;<br />
color: #eee;<br />
border: 1px solid #333;<br />
}<br />
#navigation li li a {<br />
text-decoration: none;<br />
padding: 3px 3px 3px 17px;<br />
background-color: #999;<br />
color: #111111;<br />
}<br />
#navigation li li a:active {<br />
padding: 2px 4px 4px 16px;<br />
background-color: #888;<br />
color: #000;<br />
}<br />
</style><br />
<script type="text/javascript"><br />
function swap(targetId){<br />
if (document.getElementById){<br />
target = document.getElementById(targetId);<br />
if (target.style.display == "none"){<br />
target.style.display = "";<br />
} else{<br />
target.style.display = "none";<br />
}<br />
<br />
}<br />
}<br />
</script><br />
</head><br />
<body><br />
<div id="navigation"><br />
<ul><br />
<li><br />
<a href="#" onclick="swap("sectionOneLinks");return false;">Click me</a><br />
<ul id="sectionOneLinks" style="display: none;"><br />
<li><a href="#">A link to a page</a></li><br />
<li><a href="#">A link to a page</a></li><br />
<li><a href="#">A link to a page</a></li><br />
<li><a href="#">A link to a page</a></li><br />
</ul><br />
</li><br />
<li><br />
<a href="#" onclick="swap("sectionTwoLinks");return false;">Click me</a><br />
<ul id="sectionTwoLinks" style="display: none;"><br />
<li><a href="#">A link to a page</a></li><br />
<li><a href="#">A link to a page</a></li><br />
<li><a href="#">A link to a page</a></li><br />
<li><a href="#">A link to a page</a></li><br />
</ul><br />
</li><br />
<li><br />
<a href="#" onclick="swap("sectionThreeLinks");return false;">Click</a><br />
<ul id="sectionThreeLinks" style="display: none;"><br />
<li><a href="#">A link to a page</a></li><br />
<li><a href="#">A link to a page</a></li><br />
<li><a href="#">A link to a page</a></li><br />
<li><a href="#">A link to a page</a></li><br />
</ul><br />
</li><br />
</ul><br />
</div><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Horizontal list menu==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /><br />
<title></title><br />
<style type="text/css"><br />
li {<br />
border: 1px solid;<br />
float: left;<br />
list-style-type: none;<br />
padding: 0.2em 1em;<br />
}<br />
</style><br />
</head><br />
<body><br />
<ul><br />
<li><a href="">Home</a></li><br />
<li><a href="">Contact</a></li><br />
<li><a href="">About</a></li><br />
<li><a href="">Archive</a> </li><br />
</ul><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Left list menu and three columns==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><br />
<html><br />
<head><br />
<title>CSS Positioning Example</title><br />
<style rel="stylesheet" type="text/css"><br />
#page {<br />
position: absolute;<br />
top: 10px;<br />
left: 10px;<br />
width: 800px;<br />
background-color: #fff;<br />
}<br />
#masthead {<br />
border-bottom: 1px solid black;<br />
}<br />
#sideNav {<br />
float: left;<br />
width: 150px;<br />
background-color: #ccc;<br />
border-bottom: 1px solid black;<br />
}<br />
#sideRight {<br />
float: right;<br />
width: 150px;<br />
padding: 0px;<br />
background-color: #aaa;<br />
border-bottom: 1px solid black;<br />
}<br />
#content {<br />
margin: 0px 150px 0px 150px;<br />
border-left: 1px solid #ccc;<br />
border-right: 1px solid #ccc;<br />
}<br />
.item {<br />
padding: 10px;<br />
min-height: 75px;<br />
height: 75px;<br />
}<br />
#sideNav a:link,#sideNav a:visited {<br />
display: block;<br />
padding: 5px;<br />
}<br />
#sideNav a:hover {<br />
background-color: #eee;<br />
}<br />
</style><br />
</head><br />
<body> <br />
<div id="page"> <br />
<div id="masthead"> <br />
<h2>Masthead</h2> <br />
</div> <br />
<div id="sideNav"> <br />
<a href="#">Left link one</a><br />
<a href="#">Left link two</a><br />
<a href="#">Left link three</a><br />
<a href="#">Left link four</a><br />
</div> <br />
<div id="sideRight"> <br />
Lorem ipsum dolor sit amet.<br />
</div> <br />
<div id="content"> <br />
<div class="item"> <br />
<h3>Item One</h3> <br />
<p><br />
This is a test. <br />
</p><br />
</div><br />
<div class="item"> <br />
<h3>Item Two</h3> <br />
<p><br />
This is a test. <br />
</p><br />
</div><br />
</div> <br />
</div> <br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==List based menu==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="content-type" content="text/html; charset=utf-8" /><br />
<title></title><br />
<style type="text/css" media="Screen"><br />
#navigation ul {<br />
list-style-type: none;<br />
padding: 0;<br />
margin: 0;<br />
width: 140px;<br />
font-size: 100%;<br />
}<br />
#navigation a {<br />
text-decoration: none;<br />
display: block;<br />
padding: 3px 12px 3px 8px;<br />
background-color: #666;<br />
color: #fff;<br />
border-top: 1px solid #ddd;<br />
border-right: 1px solid #333;<br />
border-bottom: 1px solid #333;<br />
border-left: 1px solid #ddd;<br />
}<br />
#navigation a:active {<br />
padding: 2px 13px 4px 7px;<br />
background-color: #444;<br />
color: #eee;<br />
border-top: 1px solid #333;<br />
border-right: 1px solid #ddd;<br />
border-bottom: 1px solid #ddd;<br />
border-left: 1px solid #333;<br />
}<br />
#navigation li li a {<br />
text-decoration: none;<br />
padding: 3px 3px 3px 17px;<br />
background-color: #999;<br />
color: #111111;<br />
}<br />
#navigation li li a:active {<br />
padding: 2px 4px 4px 16px;<br />
background-color: #888;<br />
color: #000;<br />
border-top: 1px solid #333;<br />
border-right: 1px solid #ddd;<br />
border-bottom: 1px solid #ddd;<br />
border-left: 1px solid #333;<br />
}<br />
</style><br />
</head><br />
<body><br />
<div id="navigation"><br />
<ul><br />
<li><br />
<a href="#">Section one</a><br />
<ul><li><a href="#">A link to a page</a></li><br />
<li><a href="#">A link to a page</a></li><br />
<li><a href="#">A link to a page</a></li><br />
<li><a href="#">A link to a page</a></li><br />
</ul><br />
</li><br />
<li><br />
<a href="#">Section two</a><br />
<ul><li><a href="#">A link to a page</a></li><br />
<li><a href="#">A link to a page</a></li><br />
<li><a href="#">A link to a page</a></li><br />
<li><a href="#">A link to a page</a></li><br />
</ul><br />
</li><br />
</ul><br />
</div><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Navigational list==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="content-type" content="text/html; charset=utf-8" /><br />
<title></title><br />
<style type="text/css" media="Screen"><br />
#navigation ul {<br />
list-style-type: none;<br />
padding: 0;<br />
margin: 0;<br />
}<br />
#navigation li {<br />
display: inline;<br />
font: 12px Arial, sans-serif;<br />
padding: 0 10px 0 15px;<br />
}<br />
#navigation a {<br />
color: #000000;<br />
}<br />
</style><br />
</head><br />
<body><br />
<div id="navigation"><br />
<ul><br />
<li><a href="#">Home page</a></li><br />
<li><a href="#">Reviews</a></li><br />
<li><a href="#">Live gigs</a></li><br />
<li>No Link</li><br />
</ul><br />
</div><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Put anchor into li==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<title></title><br />
<style type="text/css"><br />
body {<br />
margin: 15%;<br />
}<br />
a:link {<br />
color: #777;<br />
text-decoration: none;<br />
}<br />
a:visited {<br />
color: #333;<br />
text-decoration: none;<br />
}<br />
a:hover, a:hover {<br />
color: #777;<br />
background-color: #ccc;<br />
}<br />
a:active, a:active {<br />
color: #ccc;<br />
background-color: #ccc;<br />
}<br />
</style><br />
</head><br />
<body><br />
<div id="navsite"><br />
<p>Link navigation:</p><br />
<ul><br />
<li><a href="http://www.wbex.ru">Link</a></li><br />
<li><a href="http://www.wbex.ru">Link</a></li><br />
<li><a href="http://www.wbex.ru">Link</a></li><br />
<li><a href="http://www.wbex.ru">Link</a></li><br />
<li><a href="http://www.wbex.ru">Link</a></li><br />
<li><a href="http://www.wbex.ru">Link</a></li><br />
</ul><br />
</div><br />
<hr /><br />
<div id="content"><br />
<h2><a name="europan">Anchor</a></h2><br />
<p> <a href="http://www.wbex.ru">Link</a> and <a href="http://www.wbex.ru">Another link</a></p><br />
</div><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Unordered list containing hyperlinks==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<?xml version = "1.0"?><br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns = "http://www.w3.org/1999/xhtml"><br />
<head><br />
<title>Unordered list containing hyperlinks</title><br />
</head><br />
<body><br />
<ul><br />
<li><a href = "">D</a></li><br />
<li><a href = "">W</a></li><br />
<li><a href = "">Y</a></li><br />
<li><a href = "">C</a></li><br />
</ul><br />
</body><br />
</html><br />
</source></div>
Admin