تبلیغات
فرشته مهربانی - ساخت منوی افقی توسط CSS 9
فرشته مهربانی
هرچیزی که بخوای
صفحه نخست       پست الکترونیک          تماس با ما              ATOM            طراح قالب
گروه طراحی قالب من گروه طراحی قالب من گروه طراحی قالب من گروه طراحی قالب من گروه طراحی قالب من
درباره وبلاگ


هرچیزی که توبخوای درهرزمینه ای

مدیر وبلاگ :محمدامین نجفی فینی
نظرسنجی
به نظرشمادربازی جمعه پرسپولیس-استقلال چه نتیجه ای رغم خواهدخورد؟




CSS
امروزه پیشنهاد می شود که از Semantic HTML و CSS برای ساختار وب سایت استفاده کنیم. روش بسیار خوبی است که برای ساخت منوی سایت از CSS استفاده کنیم و از CSS برای Style دادن آن بهره ببریم، ممکن است بعضی از کاربرها به دلایلی نتوانند از CSS استفاده کنند و یا آنرا غیر فعال کرده باشند، توسط این روش آنها براحتی می توانند از منو استفاده کنند.

من در این آموزش ساده به شما نحوه ساخت یک منوی افقی ساده را با لیست های HTML و CSS آموزش می دهم.

ابتدا ما یک لیست برای منو درست می کنیم و در یک div قرار می دهیم. برای نمونه :

1 <div id="nav">
2   <ul>
3     <li><a href="#">home</a></li>
4     <li><a href="#">about</a></li>
5     <li><a href="#">portfolio</a></li>
6     <li><a href="#">contact</a></li>
7   </ul>
8 </div>

من به div یک ID اختصاص دادم که بعدا به راحتی توسط CSS به آن Style بدهم. همانطور که می دانید من در آموزش های قبلی Inline و Block را توضیح داده بودم، اجزای list به صورت block رندر می شوند، بنابراین ما نیاز داریم که آنها را به صورت inline رندر کنیم. از این کد می توانیم استفاده کنیم :

1 #nav ul li {
2     margin:0;
3     display:inline;
4     padding:5px 20px;
5     text-align:center;
6 }

همچنین من می خواهم که این منو در مرکز قرار گیرد و یک حالت hover state هم داشته باشد :

1 div#nav {
2     width:550px;
3     margin:0 auto;
4     padding:5px;
5 }
6   
7 #nav ul li:hover {
8     background-color:#FF9900;
9 }

تمام شد ! شما می توانید هر جور که دوست داشته باشید به آن style بدهید، من کل کد HTML را هم برای شما می گذارم. اگر سوالی داشتید حتما با من در میان بگذارید.

01 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
02 <html>
03 <head>
04 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
05 <title>Create horizontal navigation with CSS</title>
06 <style type="text/css">
07 <!--
08 * {
09     margin:0;
10     padding:0;
11 }
12 div#nav {
13     width:550px;
14     margin:0 auto;
15     padding:5px;
16 }
17 #nav ul li {
18     margin:0;
19     display:inline;
20     padding:5px 20px;
21     text-align:center;
22 }
23 #nav ul li:hover {
24     background-color:#FF9900;
25 }
26 -->
27 </style>
28 </head>
29 <body>
30 <div id="nav">
31   <ul>
32     <li><a href="#">home</a></li>
33     <li><a href="#">about</a></li>
34     <li><a href="#">portfolio</a></li>
35     <li><a href="#">contact</a></li>
36   </ul>
37 </div>
38 </body>
39 </html>





صفحات جانبی
آمار وبلاگ
  • کل بازدید :
  • بازدید امروز :
  • بازدید دیروز :
  • بازدید این ماه :
  • بازدید ماه قبل :
  • تعداد نویسندگان :
  • تعداد کل پست ها :
  • آخرین بازدید :
  • آخرین بروز رسانی :
امکانات جانبی