ساخت منوی افقی توسط CSS
۱۹ پاسخ
بهمن ۹م, ۱۳۸۶
امروزه پیشنهاد می شود که از Semantic HTML و CSS برای ساختار وب سایت استفاده کنیم. روش بسیار خوبی است که برای ساخت منوی سایت از CSS استفاده کنیم و از CSS برای Style دادن آن بهره ببریم، ممکن است بعضی از کاربرها به دلایلی نتوانند از CSS استفاده کنند و یا آنرا غیر فعال کرده باشند، توسط این روش آنها براحتی می توانند از منو استفاده کنند.
من در این آموزش ساده به شما نحوه ساخت یک منوی افقی ساده را با لیست های HTML و CSS آموزش می دهم.
ابتدا ما یک لیست برای منو درست می کنیم و در یک div قرار می دهیم.
برای نمونه :
<div id="nav">
<ul>
<li><a href="#">home</a></li>
<li><a href="#">about</a></li>
<li><a href="#">portfolio</a></li>
<li><a href="#">contact</a></li>
</ul>
</div>
من به div یک ID اختصاص دادم که بعدا به راحتی توسط CSS به آن Style بدهم. همانطور که می دانید من در آموزش های قبلی Inline و Block را توضیح داده بودم، اجزای list به صورت block رندر می شوند، بنابراین ما نیاز داریم که آنها را به صورت inline رندر کنیم. از این کد می توانیم استفاده کنیم :
#nav ul li {
margin:0;
display:inline;
padding:5px 20px;
text-align:center;
}
همچنین من می خواهم که این منو در مرکز قرار گیرد و یک حالت hover state هم داشته باشد :
div#nav {
width:550px;
margin:0 auto;
padding:5px;
}
#nav ul li:hover {
background-color:#FF9900;
}
تمام شد ! شما می توانید هر جور که دوست داشته باشید به آن style بدهید، من کل کد HTML را هم برای شما می گذارم. اگر سوالی داشتید حتما با من در میان بگذارید.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Create horizontal navigation with CSS</title>
<style type="text/css">
<!--
* {
margin:0;
padding:0;
}
div#nav {
width:550px;
margin:0 auto;
padding:5px;
}
#nav ul li {
margin:0;
display:inline;
padding:5px 20px;
text-align:center;
}
#nav ul li:hover {
background-color:#FF9900;
}
-->
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a href="#">home</a></li>
<li><a href="#">about</a></li>
<li><a href="#">portfolio</a></li>
<li><a href="#">contact</a></li>
</ul>
</div>
</body>
</html>
[...] روش استاندارد و همیشگی استفاده میکنم که قبلا هم در این پست نحوه ساخت آنرا توضیح داده بودم، با این تفاوت که در [...]
[...] روش استاندارد و همیشگی استفاده میکنم که قبلا هم در این پست نحوه ساخت آنرا توضیح داده بودم، با این تفاوت که در [...]
برای این کار شما نیاز به کدنویسی بیشتری دارید ، من سعی میکنم در یک آموزش براتون توضیح بدم
سلام
من هم مشکلم مثل دوست عزیز آقا یاسر است.
میخوام منوی عمودی داشته باشم با زیر منو
و کد شما رو نمی تونم استفاده کنم
میخوام زیر منوها هم از راست به چپ باز شوند
میتوانید کمک کنید؟
سلام
من میخوام منوی عمودی داشته باشم با زیر منو
و کد شما رو نمی تونم استفاده کنم
میخوام زیر منوها هم از راست به چپ باز شوند
میتوانید کمک کنید؟
yasermansoury@yahoo.com
شما باید اینطوری بنویسید :
ul#nav li a و ul#nav li a:hover
سلام شرمنده که من مزاحم شما میشم
والا من css بلد نیستم واسه همین گیر افتادم تازه ۴ روزه شروع کردم یاد بگیرم
#nav ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
#nav ul li {
float:right;
}
a:link,a:visited
{
display:block;
width:120px;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#7A991A;
}
home
about
portfolio
contact
اینجور تغییرش دادم ولی بازم نشد
لطف میکنید اگه واسم کد رو ویرایش کنید
چون شما استایل لینک رو کلی تعریف کردین، برای رفع این مشکل به لیستتون یه ID یا class بدین و بعد تو css با اون ID یا class صداش کنید تا فقط به اون اعمال شه
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
a:link,a:visited
{
display:block;
width:120px;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#7A991A;
}
Home
News
Contact
About
سلام الان این کد رو دارم ولی مشکلش اینه که وقتی تو بلاگم میزارم هر چه لینکه تا موس میره روش به رنگ سبز در میاد یعنی تمام لینکا تحت تاثیر قرار گرفتنه
مشکل دوم اینکه من الان هر جا بخوام منو ظااهر شه همون قسمت این کد رو باید کپی کنم ؟
ممنون میشم کمکم کنید
شما میتونید بری من ایمیل بفرستید تا براتون انجام بدم
موفق باشید