:ﺪﯿﻫﺩ ﻞﯾﺎﺘﺳﺍ ،ﻞﺒﻗ ﻪﺤﻔﺻ ﺪﮐ ﺮﺑ ﻩﻭﻼﻋ ،ﺖﺳﺮﻬﻓ ﻞﺧﺍﺩ ﺭﺩ <a> ﺮﺻﺎﻨﻋ ﻪﺑ ﺪﯿﻧﺍﻮﺗﯽﻣ ،ﯼ
li a
{
display: block;
width: 60px;
}→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li a {
display: block;
width: 60px;
background-color: #dddddd;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
<p>A background color is added to the links to show the link area.</p>
<p>Notice that the whole link area is clickable, not just the text.</p>
</body>
</html>
:ﻩﺪﺷ ﻩﺩﺍﺩ ﺢﯿﺿﻮﺗ ﻝﺎﺜﻣ
display: block;.ﻢﯿﻨﮐ ﺺﺨﺸﻣ ﺍﺭ (ﻩﺮﯿﻏ ﻭ ﻉﺎﻔﺗﺭﺍ ،ﻪﯿﺷﺎﺣ ،ﮏﺘﺸﻟﺎﺑ ﻞﯾﺎﻤﺗ ﺕﺭﻮﺻ ﺭﺩ ﻭ) ﺽﺮﻋ ﺪﻫﺩ ﯽﻣ ﻥﺎﮑﻣﺍ
width: 60px;ﻢﯿﻨﮐ ﺺﺨﺸﻣ ﺍﺭ ﻞﺴﮑﯿﭘ 60 ﺽﺮﻋ ﻢﯿﻫﺍﻮﺧ ﯽﻣ ﺎﻣ .ﺪﻨﻨﮐ ﯽﻣ ﻝﺎﻐﺷﺍ ﺍﺭ ﺩﻮﺟﻮﻣ ﺽﺮﻋ ﻡﺎﻤﺗ ﺽﺮﻓ ﺶﯿ
.ﺪﯿﻨﮐ ﻑﺬﺣ ﺍﺭ <a> ﺽﺮﻋ ﻭ ﺪﯿﻨﮐ ﻢﯿﻈﻨﺗ ﺍﺭ <ul> ﺽﺮﻋ ﺪﯿﻧﺍﻮﺗ ﯽﻣ ﻦﯿﻨﭽﻤﻫ
ul
{
list-style-type: none;
margin: 0;
padding: 0;
width: 60px;
}
li
a
{
display: block;
}→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 60px;
}
li a {
display: block;
background-color: #dddddd;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
<p>A background color is added to the links to show the link area.</p>
<p>Notice that the whole link area is clickable, not just the text.</p>
</body>
</html>
ﻭ ﺪﯿﻨﮐ ﺩﺎﺠﯾﺍ ﯼﺮﺘﺴﮐﺎﺧ ﻪﻨﯿﻣﺯ ﺲﭘ ﮓﻧﺭ ﺎﺑ ﻪﯿﻟﻭﺍ ﯼﺩﻮﻤﻋ ﯼﺮﺑﻭﺎﻧ ﺭﺍﻮﻧ ﮏﯾ
ul {
list-style-type: none;
margin: 0;
padding: 0;
width:
200px;
background-color: #f1f1f1;
}
li a {
display:
block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
/*
Change the link color on hover */
li a:hover {
background-color: #555;
color: white;
}→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
/* Change the link color on hover */
li a:hover {
background-color: #555;
color: white;
}
</style>
</head>
<body>
<h2>Vertical Navigation Bar</h2>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>
:ﺖﺳﺍ ﻪﺤﻔﺻ ﻡﺍﺪﮐ ﺭﺩ ﺪﻧﺍﺪﺑ ﺮﺑﺭﺎﮐ ﺎﺗ ﺪﯿﻨﮐ ﻪﻓﺎﺿﺍ ﯽﻠﻌﻓ ﺪﻧﻮﯿﭘ ﻪﺑ "ﻝﺎﻌﻓ" ﺱﻼﮐ ﮏﯾ
.active {
background-color: #04AA6D;
color: white;
}→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
li a.active {
background-color: #04AA6D;
color: white;
}
li a:hover:not(.active) {
background-color: #555;
color: white;
}
</style>
</head>
<body>
<h2>Vertical Navigation Bar</h2>
<p>In this example, we create an "active" class with a green background color and a white text. The class is added to the "Home" link.</p>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>
text-align:center ﻪﺑ ﺍﺭ <li> ﺎﯾ <a> ﺪﯿﻫﺩ ﺭﺍﺮﻗ
ﺪﯿﻫﺍﻮﺨﺑ ﻢﻫ ﺎﻤﺷ ﺮﮔﺍ .ﺪﯿﻨﮐ ﻪﻓﺎﺿﺍ ﯼﺮﺑﻭﺎﻧ ﺭﺍﻮﻧ ﻑﺍﺮﻃﺍ ﺭﺩ ﻪﯿﺷﺎﺣ ﮏﯾ ﻥﺩﺮﮐ ﻪﻓﺎﺿﺍ <ul> ﻪ
ul {
border: 1px solid #555;
}
li {
text-align: center;
border-bottom: 1px solid #555;
}
li:last-child {
border-bottom: none;
}→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
border: 1px solid #555;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
li {
text-align: center;
border-bottom: 1px solid #555;
}
li:last-child {
border-bottom: none;
}
li a.active {
background-color: #04AA6D;
color: white;
}
li a:hover:not(.active) {
background-color: #555;
color: white;
}
</style>
</head>
<body>
<h2>Vertical Navigation Bar</h2>
<p>In this example, we center the navigation links and add a border to the navigation bar.</p>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>
:ﺪﯿﻨﮐ ﺩﺎﺠﯾﺍ "ﻩﺪﻨﺒﺴﭼ" ﻭ ﺪﻗ ﻡﺎﻤﺗ ﯼﺭﺎﻨﮐ ﯼﺮﺑﻭﺎﻧ ﮏﯾ
ul {
list-style-type: none;
margin: 0;
padding: 0;
width:
25%;
background-color: #f1f1f1;
height: 100%; /* Full height */
position: fixed; /*
Make it stick, even on scroll */
overflow: auto; /* Enable scrolling if the sidenav has too much content */
}→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 25%;
background-color: #f1f1f1;
position: fixed;
height: 100%;
overflow: auto;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
li a.active {
background-color: #04AA6D;
color: white;
}
li a:hover:not(.active) {
background-color: #555;
color: white;
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
<div style="margin-left:25%;padding:1px 16px;height:1000px;">
<h2>Fixed Full-height Side Nav</h2>
<h3>Try to scroll this area, and see how the sidenav sticks to the page</h3>
<p>Notice that this div element has a left margin of 25%. This is because the side navigation is set to 25% width. If you remove the margin, the sidenav will overlay/sit on top of this div.</p>
<p>Also notice that we have set overflow:auto to sidenav. This will add a scrollbar when the sidenav is too long (for example if it has over 50 links inside of it).</p>
<p>Some text..</p>
<p>Some text..</p>
<p>Some text..</p>
<p>Some text..</p>
<p>Some text..</p>
<p>Some text..</p>
<p>Some text..</p>
</div>
</body>
</html>
ﻪﺟﻮﺗ: ﺪﻨﮑﻧ ﺭﺎﮐ ﻩﺍﺮﻤﻫ ﻦﻔﻠﺗ ﯼﺎﻫ ﻩﺎﮕﺘﺳﺩ ﺭﺩ ﯽﺘﺳﺭﺩ ﻪﺑ ﺖﺳﺍ ﻦﮑﻤﻣ ﻝﺎﺜ