ساخت منوی افقی توسط CSS

9 بهمن

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>

این مطالب هم می تواند برای شما جالب باشد :

28 دیدگاه

بخش : CSS, XHTML

28 دیدگاه

مهاجر
آبان 5, 1388

آیا لازم نیست چهره گرافیکی منوها رو تو اینترنت آپلود کنیم؟

[پاسخ دهید]
مهاجر
آبان 5, 1388

من تازگی ها یه وبلاگ درست کردم که میخوام در قسمت بالایی وبلاگ منو قرار بدم آیا این راه در ویلاگ هم جواب میده؟
آیا لازم نسیت که اجزای گرافیکی منو رو تو اینترنت آپلود کرد؟

[پاسخ دهید]
فرشاد
آبان 5, 1388

این روش بدون استفاده از گرافیک هست ولی شما می تونید با کمی تغییر روی آن منوی گرافیکی هم درست کنید.
برای این منظور این آموزش رو هم بخونید :
http://blog.datisdesign.com/persian/?p=115

[پاسخ دهید]
samira
بهمن 6, 1388

سلام و خسته نباشید

و تشکر بابت مطالب خوبتون .

من می خوام منو درست کنم این روش رو خوندم اجرا کردم ولی می خوام منو هاش

مثل سایت زیر باشه
http://www.digital-kaos.co.uk/forums/f90/total-recorder-v8-0-3844-a-86742/

چطوری به چه صورت باید انجام بدم

[پاسخ دهید]
samira
بهمن 6, 1388

سلام ممنون و پاسخ سریعتون

اون روش رو هم خوندم ولی چیزی که درست کردم رو دوست ندارم

خواستم بینم کسی هست سفارش بدم واسم همچین منویی با این شمایل

http://www.digital-kaos.co.uk/forums/f90/total-recorder-v8-0-3844-a-86742/
طراحی کنه هزینش رو پرداخت میکنم

[پاسخ دهید]
فرشاد
بهمن 7, 1388

شما میتونید بری من ایمیل بفرستید تا براتون انجام بدم
موفق باشید

[پاسخ دهید]
samira
بهمن 15, 1388

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

سلام الان این کد رو دارم ولی مشکلش اینه که وقتی تو بلاگم میزارم هر چه لینکه تا موس میره روش به رنگ سبز در میاد یعنی تمام لینکا تحت تاثیر قرار گرفتنه

مشکل دوم اینکه من الان هر جا بخوام منو ظااهر شه همون قسمت این کد رو باید کپی کنم ؟

ممنون میشم کمکم کنید

[پاسخ دهید]
فرشاد
بهمن 16, 1388

چون شما استایل لینک رو کلی تعریف کردین، برای رفع این مشکل به لیستتون یه ID یا class بدین و بعد تو css با اون ID یا class صداش کنید تا فقط به اون اعمال شه

[پاسخ دهید]
samira
بهمن 18, 1388

سلام شرمنده که من مزاحم شما میشم

والا من css بلد نیستم واسه همین گیر افتادم تازه 4 روزه شروع کردم یاد بگیرم

#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

اینجور تغییرش دادم ولی بازم نشد

لطف میکنید اگه واسم کد رو ویرایش کنید

[پاسخ دهید]
فرشاد
بهمن 19, 1388

شما باید اینطوری بنویسید :
ul#nav li a و ul#nav li a:hover

[پاسخ دهید]
yaser
بهمن 29, 1388

سلام
من میخوام منوی عمودی داشته باشم با زیر منو

و کد شما رو نمی تونم استفاده کنم

میخوام زیر منوها هم از راست به چپ باز شوند

میتوانید کمک کنید؟

yasermansoury@yahoo.com

[پاسخ دهید]
behzad
فروردین 11, 1389

سلام
من هم مشکلم مثل دوست عزیز آقا یاسر است.

میخوام منوی عمودی داشته باشم با زیر منو

و کد شما رو نمی تونم استفاده کنم

میخوام زیر منوها هم از راست به چپ باز شوند

میتوانید کمک کنید؟

[پاسخ دهید]
فرشاد
فروردین 12, 1389

برای این کار شما نیاز به کدنویسی بیشتری دارید ، من سعی میکنم در یک آموزش براتون توضیح بدم

[پاسخ دهید]
سبزین تن
تیر 17, 1390

مرسی

[پاسخ دهید]
pakdel
تیر 30, 1390

توضیحاتتون خوب بود ولی نقس هایی هم داشت و خیلی مناسب نبود
موفق باشید

[پاسخ دهید]
سمیرا
آذر 16, 1390

با سلام
من میخوام یه سایت روی اینترانت طراحی کنم و خیلی هم در مورد طراحی سایت نمیدونم
از کجا باید شروع کنم؟
میتونید کمکم کنید
ممنون

[پاسخ دهید]
فرشاد پاسخ در تاريخ 16 آذر 1390 3:59 ب.ظ:
سلام
این مطلب رو بخونید برای شروع
http://ht.ly/7RpJ1

[پاسخ دهید]
روژ
دی 21, 1390

استفاده کردم اگه وقت داشتید زیرمنوها رو هم توضیح بدید.ممنون

[پاسخ دهید]
فرشاد پاسخ در تاريخ 21 دی 1390 12:37 ب.ظ:
این مطلب رو بخونید http://ht.ly/8piEg

[پاسخ دهید]
ebne-yamin
بهمن 21, 1390

سلام. من یک منو تب دار واسه سایتم میخوام که با html باشه. تبی که لازم دارم میخوام یک کادر که بالای اون چندتا تب داره و هر کدوم یک قسمت از سایت باشه و هر سربرگ رو که زدم مطلب مربوط به همون زیرش داخل کادر نمایش داده بشه.اگه میشه جوابم رو به ایمیلم بفرست. ممنون. جانه من کمک کنید حیاتیه !!!!!
اینم سایتم: http://www.ebne-yamin.vcp.ir

[پاسخ دهید]
محمد
بهمن 30, 1390

سلام
اگر بخواهیم آیتم های منو را از داخل دیتابیس بخواند چکار باید کرد

[پاسخ دهید]
مرتضی
اسفند 24, 1390

سلام
ممنون از مطالب مفید و کاربردی
آیا امکانش هست که به قالب زیر یک منو شبیه به منوی راستی اضافه کنید ،اینهم لینک دانلود قالب
http://www.maxtemp.ir/engine/download.php?id=76
ممنون میشم اگه کارمو راه بندازید

[پاسخ دهید]