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

۱۴ پاسخ

بهمن ۹م, ۱۳۸۶

زیر شاخه: CSS, X)HTML)
توسط: فرشاد

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>

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

۱۴ پاسخ به “ ساخت منوی افقی توسط CSS ”

فرشاد در ۱۰:۳۰ ق.ظ بهمن ۱۹م, ۱۳۸۸ گفت:

شما باید اینطوری بنویسید :
ul#nav li a و ul#nav li a:hover
samira در ۸:۲۵ ق.ظ بهمن ۱۸م, ۱۳۸۸ گفت:

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

والا من 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 صداش کنید تا فقط به اون اعمال شه
samira در ۱۱:۴۸ ب.ظ بهمن ۱۵م, ۱۳۸۸ گفت:

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

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

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

ممنون میشم کمکم کنید
فرشاد در ۳:۴۸ ق.ظ بهمن ۷م, ۱۳۸۸ گفت:

شما میتونید بری من ایمیل بفرستید تا براتون انجام بدم
موفق باشید
samira در ۱۱:۵۲ ب.ظ بهمن ۶م, ۱۳۸۸ گفت:

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

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

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

http://www.digital-kaos.co.uk/forums/f90/total-recorder-v8-0-3844-a-86742/
طراحی کنه هزینش رو پرداخت میکنم
samira در ۵:۲۵ ب.ظ بهمن ۶م, ۱۳۸۸ گفت:

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

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

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

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

چطوری به چه صورت باید انجام بدم
فرشاد در ۳:۱۰ ب.ظ آبان ۵م, ۱۳۸۸ گفت:

این روش بدون استفاده از گرافیک هست ولی شما می تونید با کمی تغییر روی آن منوی گرافیکی هم درست کنید.
برای این منظور این آموزش رو هم بخونید :
http://blog.datisdesign.com/persian/?p=115
مهاجر در ۲:۴۹ ب.ظ آبان ۵م, ۱۳۸۸ گفت:

من تازگی ها یه وبلاگ درست کردم که میخوام در قسمت بالایی وبلاگ منو قرار بدم آیا این راه در ویلاگ هم جواب میده؟
آیا لازم نسیت که اجزای گرافیکی منو رو تو اینترنت آپلود کرد؟
مهاجر در ۲:۴۱ ب.ظ آبان ۵م, ۱۳۸۸ گفت:

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

وبلاگ داتیس دیزاین

طراحی برای برقراری ارتباط

دسته‌ها

بایگانی

پیوندها

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

۱۴ پاسخ به “ ساخت منوی افقی توسط CSS ”

نظر دهید