CSS ﯽﻘﻓﺍ ﯼﺮﺑﻭﺎﻧ ﺭﺍﻮﻧ
فهرست مطالب
ﯽﻘﻓﺍ ﯼﺮﺑﻭﺎﻧ ﺭﺍﻮﻧ
ﺯﺍ ﻩﺩﺎﻔﺘﺳﺍ ﺎﺑ .ﺩﺭﺍﺩ ﺩﻮﺟﻭ ﯽﻘﻓﺍ ﺶﯾﺎﻤﯿﭘ ﺭﺍﻮﻧ ﮏﯾ ﺩﺎﺠﯾﺍ ﯼﺍﺮﺑ ﻩﺍﺭ ﻭﺩ
ﯽﻄﺧ ﻥﻭﺭﺩ ﺖﺳﺮﻬﻓ ﺩﺭﺍﻮﻣ
ﺖﺳﺍ <li> ﺮﺻﺎﻨﻋ ﻦﯿﯿﻌﺗ ،ﯽﻘﻓﺍ ﺶﯾﺎﻤﯿﭘ ﺭﺍﻮﻧ ﮏﯾ ﺩﺎﺠﯾﺍ ﯼﺎﻫﻩﺍﺭ ﺯﺍ ﯽﮑﯾ
ﻝﺎﺜﻣ
li
{
display: inline;
}→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
display: inline;
}
</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>
</body>
</html>
:ﻩﺪﺷ ﻩﺩﺍﺩ ﺢﯿﺿﻮﺗ ﻝﺎﺜﻣ
display: inline;ﺪﻧﻮﺷ ﻩﺩﺍﺩ ﺶﯾﺎﻤﻧ ﻂﺧ ﮏﯾ ﺭﺩ ﺎﺗ ﻢﯿﻨﮐ ﯽﻣ ﻑﺬﺣ ﺍﺭ ﺖﺴﯿﻟ ﻢﺘﯾﺁ ﺮﻫ ﺯﺍ ﺪﻌﺑ ﻭ ﻞﺒﻗ ﻁﻮﻄﺧ ،ﺎﺠﻨ
ﺭﻭﺎﻨﺷ ﺖﺳﺮﻬﻓ ﺩﺭﺍﻮﻣ
ﺖﺳﺍ <li> ﻥﺩﺮﮐ ﺭﻭﺎﻨﺷ ﯽﻘﻓﺍ ﺶﯾﺎﻤﯿﭘ ﺭﺍﻮﻧ ﮏﯾ ﺩﺎﺠﯾﺍ ﺮﮕﯾﺩ ﻩﺍﺭ
ﻝﺎﺜﻣ
li
{
float: left;
}
a
{
display: block;
padding: 8px;
background-color:
#dddddd;
}→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
li a {
display: block;
padding: 8px;
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><b>Note:</b> If a !DOCTYPE is not specified, floating items can produce unexpected results.</p>
<p>A background color is added to the links to show the link area. The whole link area is clickable, not just the text.</p>
<p><b>Note:</b> overflow:hidden is added to the ul element to prevent li elements from going outside of the list.</p>
</body>
</html>
:ﻩﺪﺷ ﻩﺩﺍﺩ ﺢﯿﺿﻮﺗ ﻝﺎﺜﻣ
float: left;ﺪﻧﻮﺷ ﺭﻭﺎﻨﺷ ﺮﮕﯾﺪﮑﯾ ﺭﺎﻨﮐ ﺭﺩ ﮎﻮﻠﺑ ﺮﺻﺎﻨﻋ ﺎﺗ ﺪﯿﻨﮐ ﻩﺩﺎﻔﺘﺳﺍ float ﺯﺍ -
display: block;.ﻢﯿﻨﮐ ﺺﺨﺸﻣ ﺍﺭ (ﻩﺮﯿﻏ ﻭ ﻪﯿﺷﺎﺣ ،ﺽﺮﻋ ،ﻉﺎﻔﺗﺭﺍ ﻞﯾﺎﻤﺗ ﺕﺭﻮﺻ ﺭﺩ ﻭ) ﮏﺘﺸﻟﺎﺑ ﺎﺗ ﺪﻫﺩ ﯽﻣ ﻥﺎﮑ
padding: 8px;ﺪﻨﺳﺮﺑ ﺮﻈﻧ ﻪﺑ ﺏﻮﺧ ﺎﺗ ﺪﯿﻨﮐ ﺺﺨﺸﻣ <a> ﺮﺼﻨﻋ ﺮﻫ ﻦﯿﺑ ﮏﺘﺸﻟﺎﺑ ﯼﺭﺍﺪﻘﻣ -
background-color: #dddddd;ﺪﯿﻨﮐ ﻪﻓﺎﺿﺍ ﯼﺮﺘﺴﮐﺎﺧ ﻪﻨﯿﻣﺯ ﺲﭘ ﮓﻧﺭ ﮏﯾ <a> ﺮﺼﻨﻋ ﺮﻫ ﻪﺑ -
ﻪﺘﮑﻧ: ﯽﻣ ﺮﮔﺍﺮﺼﻨﻋ ﺮﻫ ﯼﺎﺟ ﻪﺑ ﺪﯿﻫﺍﻮﺧ <a>، ﺲﭘ ﮓﻧﺭﻪﺑ ﺍﺭ
ﻝﺎﺜﻣ
ul
{
background-color: #dddddd;
}→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #dddddd;
}
li {
float: left;
}
li a {
display: block;
padding: 8px;
}
</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 list instead of each link to create a full-width background color.</p>
<p><b>Note:</b> overflow:hidden is added to the ul element to prevent li elements from going outside of the list.</p>
</body>
</html>
ﯽﻘﻓﺍ ﺶﯾﺎﻤﯿﭘ ﺭﺍﻮﻧ ﯼﺎﻫ ﻪﻧﻮﻤﻧ
:ﺪﯿﻫﺩ ﺮﯿﯿﻐﺗ ﺍﺭ ﺎﻫﺪﻧﻮﯿﭘ ﻪﻨﯿﻣﺯﺲﭘ ﮓﻧﺭ ،ﺩﺮﺑﯽﻣ ﺎﻫﺪﻧﻮﯿﭘ ﯼﻭﺭ ﺍﺭ ﺱﻭﺎﻣ ﺮﺑﺭﺎﮐ
ﻝﺎﺜﻣ
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow:
hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color:
#111;
}→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
</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>
</body>
</html>
ﯼﺭﺎﺟ/ﻝﺎﻌﻓ ﯼﺮﺑﻭﺎﻧ ﺪﻧﻮﯿﭘ
:ﺖﺳﺍ ﻪﺤﻔﺻ ﻡﺍﺪﮐ ﺭﺩ ﺪﻧﺍﺪﺑ ﺮﺑﺭﺎﮐ ﺎﺗ ﺪﯿﻨﮐ ﻪﻓﺎﺿﺍ ﯽﻠﻌﻓ ﺪﻧﻮﯿﭘ ﻪﺑ "ﻝﺎﻌﻓ" ﺱﻼﮐ ﮏﯾ
ﻝﺎﺜﻣ
.active {
background-color: #04AA6D;
}→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #04AA6D;
}
</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>
</body>
</html>
ﻦﯿﭼ ﺖﺳﺍﺭ ﯼﺎﻫﺪﻧﻮﯿﭘ
:(float:right;) ﺪﯿﻨﮐ ﺯﺍﺮﺗ ﺖﺳﺍﺭ ﺖﻤﺳ ﻪﺑ ﺖﺳﺮﻬﻓ ﺩ
ﻝﺎﺜﻣ
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li style="float:right"><a
class="active" href="#about">About</a></li>
</ul>→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #04AA6D;
}
</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 style="float:right"><a class="active" href="#about">About</a></li>
</ul>
</body>
</html>
ﯼﺯﺮﻣ ﯼﺎﻫ ﻩﺪﻨﻨﮐ ﻢﯿﺴﻘﺗ
:ﺪﯿﻨﮐ ﻪﻓﺎﺿﺍ <li> ﻪﺑ ﺍﺭ border-right ﯽﮔﮋﯾﻭ ،ﺪﻧ
ﻝﺎﺜﻣ
/* Add a gray right border to all list items, except the last item
(last-child) */
li {
border-right: 1px solid #bbb;
}
li:last-child {
border-right: none;
}→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
border-right:1px solid #bbb;
}
li:last-child {
border-right: none;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #04AA6D;
}
</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 style="float:right"><a href="#about">About</a></li>
</ul>
</body>
</html>
ﺖﺑﺎﺛ ﯼﺮﺑﻭﺎﻧ ﺭﺍﻮﻧ
:ﺪﻨﮐ ﯽﻣ ﻝﻭﺮﮑﺳﺍ ﺍﺭ ﻪﺤﻔﺻ ﺮﺑﺭﺎﮐ ﻪﮐ ﯽﻧﺎﻣﺯ ﯽﺘﺣ ،ﺪﻧﺎﻤﺑ ﯽﻗﺎﺑ ﻪﺤﻔﺻ ﻦﯿﯾﺎﭘ ﺎﯾ ﻻﺎﺑ ﺭﺩ ﺶﯾﺎ
ﺖﺑﺎﺛ ﻻﺎﺑ
ul {
position: fixed;
top: 0;
width: 100%;
}→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ
<!DOCTYPE html>
<html>
<head>
<style>
body {margin:0;}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #04AA6D;
}
</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="padding:20px;margin-top:30px;background-color:#1abc9c;height:1500px;">
<h1>Fixed Top Navigation Bar</h1>
<h2>Scroll this page to see the effect</h2>
<h2>The navigation bar will stay at the top of the page while scrolling</h2>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
</div>
</body>
</html>
ﺖﺑﺎﺛ ﻦﯿﯾﺎﭘ
ul {
position: fixed;
bottom: 0;
width: 100%;
}→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ
<!DOCTYPE html>
<html>
<head>
<style>
body {margin:0;}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: fixed;
bottom: 0;
width: 100%;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #04AA6D;
}
</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="padding:20px;background-color:#1abc9c;height:1500px;">
<h1>Fixed Bottom Navigation Bar</h1>
<h2>Scroll this page to see the effect</h2>
<h2>The navigation bar will stay at the bottom of the page while scrolling</h2>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
</div>
</body>
</html>
ﻪﺟﻮﺗ: ﺪﻨﮑﻧ ﺭﺎﮐ ﻩﺍﺮﻤﻫ ﻦﻔﻠﺗ ﯼﺎﻫ ﻩﺎﮕﺘﺳﺩ ﺭﺩ ﯽﺘﺳﺭﺩ ﻪﺑ ﺖﺳﺍ ﻦﮑﻤﻣ ﺖﺑﺎ
ﯼﺮﺘﺴﮐﺎﺧ ﯽﻘﻓﺍ ﯼﺮﺑﻭﺎﻧ ﺭﺍﻮﻧ
:ﮎﺯﺎﻧ ﯼﺮﺘﺴﮐﺎﺧ ﻪﯿﺷﺎﺣ ﺎﺑ ﯼﺮﺘﺴﮐﺎﺧ ﯽﻘﻓﺍ ﺶﯾﺎﻤﯿﭘ ﺭﺍﻮﻧ ﺯﺍ ﯼﺍ ﻪﻧﻮﻤﻧ
ﻝﺎﺜﻣ
ul {
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
}
li a {
color:
#666;
}→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
}
li {
float: left;
}
li a {
display: block;
color: #666;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #ddd;
}
li a.active {
color: white;
background-color: #04AA6D;
}
</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>
</body>
</html>
ﻩﺪﻨﺒﺴﭼ ﯼﺮﺑﻭﺎﻧ ﺭﺍﻮﻧ
.ﺪﯿﻨﮐ ﻪﻓﺎﺿﺍ <ul> ﻪﺑ ﺍﺭ position: sticky; ،ﻩﺪﻨ
.(ﺖﺑﺎﺛ :ﺖﯿﻌﻗﻮﻣ ﺪﻨﻧﺎﻣ) ﺩﻮﺷ ﯽﻣ "ﺐﺴﭼ" ﺩﻮﺧ ﯼﺎﺟ ﺭﺩ ﺲﭙﺳ - ﺩﺮﯿﮔ ﯽﻣ ﺭﺍﺮﻗ ﯽﺒﺴﻧ ﺩﺮﯿﮔ ﺭﺍﺮ
ﻝﺎﺜﻣ
ul {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
}→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-size: 28px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
</style>
</head>
<body>
<div class="header">
<h2>Scroll Down</h2>
<p>Scroll down to see the sticky effect.</p>
</div>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<h3>Sticky Navigation Bar Example</h3>
<p>The navbar will <strong>stick</strong> to the top when you reach its scroll position.</p>
<p><strong>Note:</strong> Internet Explorer do not support sticky positioning and Safari requires a -webkit- prefix.</p>
<p>Some text to enable scrolling. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
</body>
</html>
ﻪﺟﻮﺗ: Internet Explorer ﺪﻨﮐ ﯽﻤﻧ ﯽﻧﺎﺒﯿﺘﺸﭘ ﻩﺪﻨﺒﺴﭼ ﯽﺑﺎﯾ ﺖﯿﻌﻗﻮﻣ ﺯ
ﺮﺘﺸﯿﺑ ﯼﺎﻫ ﻪﻧﻮﻤﻧ
Topnav ﻮﮕﺨﺳﺎﭘ
.ﻮﮕﺨﺳﺎﭘ ﻻﺎﺑ ﯼﺮﺑﻭﺎﻧ ﮏﯾ ﺩﺎﺠﯾﺍ ﯼﺍﺮﺑ CSS ﯼﺍﻪﻧﺎﺳﺭ ﯼﺎﻫﻮﺟﻭﺱﺮﭘ ﺯﺍ ﻩﺩﺎﻔﺘﺳﺍ ﻩﻮ
→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {margin: 0;}
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
ul.topnav li {float: left;}
ul.topnav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
ul.topnav li a:hover:not(.active) {background-color: #111;}
ul.topnav li a.active {background-color: #04AA6D;}
ul.topnav li.right {float: right;}
@media screen and (max-width: 600px) {
ul.topnav li.right,
ul.topnav li {float: none;}
}
</style>
</head>
<body>
<ul class="topnav">
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li class="right"><a href="#about">About</a></li>
</ul>
<div style="padding:0 16px;">
<h2>Responsive Topnav Example</h2>
<p>This example use media queries to stack the topnav vertically when the screen size is 600px or less.</p>
<p>You will learn more about media queries and responsive web design later in our CSS Tutorial.</p>
<h4>Resize the browser window to see the effect.</h4>
</div>
</body>
</html>
Sidenav ﻮﮕﺨﺳﺎﭘ
.ﻮﮕﺨﺳﺎﭘ ﯽﺒﻧﺎﺟ ﯼﺮﺑﻭﺎﻧ ﮏﯾ ﺩﺎﺠﯾﺍ ﯼﺍﺮﺑ CSS ﯼﺍ ﻪﻧﺎﺳﺭ ﯼﺎﻫﻮﺟ ﻭ ﺱﺮﭘ ﺯﺍ ﻩﺩﺎﻔﺘﺳﺍ ﻩﻮﺤﻧ
→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {margin: 0;}
ul.sidenav {
list-style-type: none;
margin: 0;
padding: 0;
width: 25%;
background-color: #f1f1f1;
position: fixed;
height: 100%;
overflow: auto;
}
ul.sidenav li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
ul.sidenav li a.active {
background-color: #4CAF50;
color: white;
}
ul.sidenav li a:hover:not(.active) {
background-color: #555;
color: white;
}
div.content {
margin-left: 25%;
padding: 1px 16px;
height: 1000px;
}
@media screen and (max-width: 900px) {
ul.sidenav {
width: 100%;
height: auto;
position: relative;
}
ul.sidenav li a {
float: left;
padding: 15px;
}
div.content {margin-left: 0;}
}
@media screen and (max-width: 400px) {
ul.sidenav li a {
text-align: center;
float: none;
}
}
</style>
</head>
<body>
<ul class="sidenav">
<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 class="content">
<h2>Responsive Sidenav Example</h2>
<p>This example use media queries to transform the sidenav to a top navigation bar when the screen size is 900px or less.</p>
<p>We have also added a media query for screens that are 400px or less, which will vertically stack and center the navigation links.</p>
<p>You will learn more about media queries and responsive web design later in our CSS Tutorial.</p>
<h3>Resize the browser window to see the effect.</h3>
</div>
</body>
</html>
ﯽﯾﻮﺸﮐ ﯼﺮﺑﻭﺎﻧ ﺭﺍﻮﻧ
ﯼﺮﺑﻭﺎﻧ ﺭﺍﻮﻧ ﺭﺩ ﯽﯾﻮﺸﮐ ﯼﻮﻨﻣ ﮏﯾ ﻥﺩﺮﮐ ﻪﻓﺎﺿﺍ ﻩﻮﺤﻧ
→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color:white;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #38444d;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1;}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li class="dropdown">
<a href="javascript:void(0)" class="dropbtn">Dropdown</a>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</li>
</ul>
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>
</body>
</html>