ساخت یک منو با دایو و اچ تی ام ال

 

برای ساختن منوی های افقی به صورت غیر اصولی راه های زیادی وجود دارد که معمولا توسط افراد مبتدی بکار گرفته میشود. ساخت منوی غیر استاندارد علاوه بر اینکه ممکن است در مرورگرهای مختلف پایایی کافی نداشته و ظاهر اصلی خود را از دست بدهد، از نظر HTML معنایی نیز برای مرورگرها و موتورهای جستجو قابل درک نیست. در طراحی صفحات وب، منوی افقی یک لیست محسوب می شود و باید با عناصر مخصوص ایجاد لیست پیاده سازی شود. در این ارسال چگونگی ساخت یک منوی استاندارد توسط HTML و CSS را شرح خواهم داد.

<ul class="simplemenu">
   <li><a href="/site/#">Home</a></li>
   <li><a href="/site/#">About</a></li>
   <li><a href="/site/#">Clients</a></li>
   <li><a href="/site/#">Contact Us</a></li>
</ul>



برای ساخت منوی افقی در HTML، ابتدا آیتم های منو را توسط عنصر <code><ul></code> به صورت زیر پیاده میکنیم :


<pre class="brush:xml;" >
<div id="navcontainer">
<ul id="nav">
   <li><a href="/site/#">Home</a></li>
   <li><a href="/site/#">About</a></li>
   <li><a href="/site/#">Clients</a></li>
   <li><a href="/site/#">Contact Us</a></li>
</ul>
</div>
</pre>

سپس توسط دستور <code>display:inline</code> در CSS آیتم های منوی مورد نظر را به صورت خطی در محور افقی نمایش میدهیم:


<pre class="brush:css;" >
#nav li
{
display: inline;
list-style-type: none;
padding-right: 20px;
}

    

تبلیغ در گوگل:

tabligh-gogle

طراحی خودرویی لوکس با قدرت تانک +عکس
۱۶/۰۶/۱۳۹۳ | Administrator

"مایک انیا" به تازگی از خودرویی رونمایی کرده است که می تواند ایمن ترین خودروی آینده باشد. این طرح در ظاهر بسیارس [ ... ]


قیمت‌ موبایل‌های‌ اندرویدی محبوب‌ بازار/ جدول
۱۴/۰۶/۱۳۹۳ | Administrator


جولان خودروهای لوکس در خیابان های شهرهای ایران+ تصاویر
۱۶/۰۶/۱۳۹۳ | Administrator

شفقنا- جولان خودروهای پلاک موقت گران قیمت در سطح شهرها به شدت افزایش یافته و شاهد جولان این گونه خودروها در خی [ ... ]


مردم از آیفون 6 چه می‌خواهند؟
۱۴/۰۶/۱۳۹۳ | Administrator

نتایج یک نظرسنجی که از کاربران گوشی‌های آیفون انجام شده نشان می‌دهد که اکثر کاربران چشم انتظار نمایشگر ضد خش  [ ... ]


مطالب ديگر
mod_vvisit_counterامروز578
mod_vvisit_counterدیروز956
mod_vvisit_counterاین ماه18982
mod_vvisit_counterکل بازدیدها145004

پرداخت آنلاین- انتقال وجه

1sefareshtarahisite

2nahie-karbari

3sefaresh-hostdomain

4estelam-gheymatdesign

5sefaresh-tabligh-gogl

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

بازدیدکننده محترم با عضویت در خبرنامه از اخرین تخفیف ها مطلع شوید




خدمات فهرست:

b3

b4

paypal_charge

200mb


banne-ramlak

banner-school

Web Analytics