sahel65
پنج شنبه 15 مرداد 1394, 18:18 عصر
سلام دوستان گلم؛
دیدین بعضی وقتها تو برخی از سایتها که میریم، روی منوهاشون که میریم سمت راست منو یه 2 یا 3 پیکسلی رنگی میشه که این به زیبایی کار اضافه میکنه و باعث قشنگ تر شدن کار میشه. حالا من هم اومدم و برای تمرین میخواستم همین کار رو بکنم. چند تا سناریو تو ذهنم بود مثل:
الف) یه پس زمینه به li بدم و بعدش که کاربر روی منو رفت(حالت hover) علاوه بر اینکه رنگ آیتم تغییر پیدا کرد یه خورده هم padding پیدا کنه از سمت راست و رنگ زمینه دیده بشه که خوب این یه خورده سخت میکرد کار رو.
ب) که این راه رو انتخاب کردم و اومدم به تگ a در حالتی که hover میشه یه border از سمت راست دادم و اونو قرمز و کمی پررنگتر کردم. حالا وقتی که میرم روی آیتم ها اون هدفی که میخوام بهش رسیدم ولی یه خورده متنهای منو به سمت چپ حرکت میکنن که نمیخوام اینجوری بشه. باید چه راهکاری رو پیاده کنم که اینجوری نشه؟؟ به a:hover بیام و width بدم؟؟
اینهم کد:
*{
margin:0;
padding:0;
}
body{
color:black;
padding:20px;
height:600px;
}
#wrapper{
width:960px;
padding:50px;
margin:0 auto;
overflow:auto;
}
ul#menu{
float:right;
border-top:1px solid black;
border-bottom:1px solid black;
list-style:none;
}
ul#menu li{
width:90px;
float:right;
}
ul#menu li a{
text-decoration:none;
line-height:50px;
display:block;
text-align:center;
border-right:1px solid black;
padding-right:5px;
}
ul#menu li a:hover{
border-right:5px solid red;
}
ul#menu li:last-child{
border-left:1px solid black;
}
و اینهم کد Html :
<body>
<div id="wrapper">
<ul id="menu">
<li><a href="#">خبر اول</a></li>
<li><a href="#">خبر دوم</a></li>
<li><a href="#">خبر سوم</a></li>
</ul>
</div>
</body>
و اینهم لینک کد اجرایی (http://jsfiddle.net/o3nrdk82/) جهت راحتی کار شما.
دیدین بعضی وقتها تو برخی از سایتها که میریم، روی منوهاشون که میریم سمت راست منو یه 2 یا 3 پیکسلی رنگی میشه که این به زیبایی کار اضافه میکنه و باعث قشنگ تر شدن کار میشه. حالا من هم اومدم و برای تمرین میخواستم همین کار رو بکنم. چند تا سناریو تو ذهنم بود مثل:
الف) یه پس زمینه به li بدم و بعدش که کاربر روی منو رفت(حالت hover) علاوه بر اینکه رنگ آیتم تغییر پیدا کرد یه خورده هم padding پیدا کنه از سمت راست و رنگ زمینه دیده بشه که خوب این یه خورده سخت میکرد کار رو.
ب) که این راه رو انتخاب کردم و اومدم به تگ a در حالتی که hover میشه یه border از سمت راست دادم و اونو قرمز و کمی پررنگتر کردم. حالا وقتی که میرم روی آیتم ها اون هدفی که میخوام بهش رسیدم ولی یه خورده متنهای منو به سمت چپ حرکت میکنن که نمیخوام اینجوری بشه. باید چه راهکاری رو پیاده کنم که اینجوری نشه؟؟ به a:hover بیام و width بدم؟؟
اینهم کد:
*{
margin:0;
padding:0;
}
body{
color:black;
padding:20px;
height:600px;
}
#wrapper{
width:960px;
padding:50px;
margin:0 auto;
overflow:auto;
}
ul#menu{
float:right;
border-top:1px solid black;
border-bottom:1px solid black;
list-style:none;
}
ul#menu li{
width:90px;
float:right;
}
ul#menu li a{
text-decoration:none;
line-height:50px;
display:block;
text-align:center;
border-right:1px solid black;
padding-right:5px;
}
ul#menu li a:hover{
border-right:5px solid red;
}
ul#menu li:last-child{
border-left:1px solid black;
}
و اینهم کد Html :
<body>
<div id="wrapper">
<ul id="menu">
<li><a href="#">خبر اول</a></li>
<li><a href="#">خبر دوم</a></li>
<li><a href="#">خبر سوم</a></li>
</ul>
</div>
</body>
و اینهم لینک کد اجرایی (http://jsfiddle.net/o3nrdk82/) جهت راحتی کار شما.