• صفحه نخست
  • درباره ی ما
  • ارتباط با ما
  • وبلاگ
  • مرکز آموزش
  • قوانین خرید
بلاگ تمز-دانلود قالب بلاگ بیان،قالب و افزونه وردپرس
  • قالب بلاگ بیان
  • قالب وردپرس
  • افزونه وردپرس
  • پروژه کامپیوتر
  • ورود / عضویت
  • فراموشی گذرواژه

آموزش ساخت منو با html5 و css3

  • خانه
  • دسته بندی نشده
  • آموزش ساخت منو با html5 و css3
ج.محمد فروردین ۱۵, ۱۳۹۴ دسته بندی نشده ۰ نظر

سلام ، امروز فایل html5 و css منو سایت که در این پست طراحی کردم  رو براتون آماده کردم و آموزششو براتون میذارم.

اول ساختار منوی سایت خودمون رو کدنویسی میکنیم. (فایل html)

<nav id="jamo-navigation">
<ul id="menu">
<li class="selected"><a href="#">صفحه نخست</a></li>
<li><a href="#">نمونه کارهام</a></li>
<li><a href="/">وبلاگ</a></li>
<li><a href="/">درباره ی من</a></li>
<li><a href="/">تماس </a></li>
</ul>
</nav>

ساختار منوی مان کامل شد تنها تگی که شاید ناآشنا باشد تگ NAV هستش ! این تگ html5 هستش (نسخه جدید html) که برای ایجاد منو بکار میره!، چند نکته در مورد  css بگم ، یه سری تگ ها هستن که خود مرورگرها براشون یه استایل پیش فرض دارن ؛ مثلا دادن خط زیرین به لینک ها ! توی آموزش ساخت منوی سایت تگ های ul, li,a و body هستن که باید مقدار پیش فرض ها اون ها رو خودمون تعیین کنیم. چجوری ؟ خودمون به اون خصوصیات که مرورگر مقدار پیش فرض میده رو بهشون مقدار میدهیم.خب با کد بگم بهتره!

body{ margin:0; }
a{ text-decoration:none; }
ul, li{ list-style: none; margin:0; padding:0 }

خب حالا دیگه  به منوی سایتمون استایل میدهیم.آموزش سی اس اس.

استایل باکس یا بلوکی که منو توش قرار داره. تگ nav

nav#jamo-navigation{
background-color: rgba();
margin:0 auto;
border-radius:2px;
box-shadow: inset 0 0 5px #1F1F1F;
pading:4px;
}

استایل اینم لیست منو ؛ li 

ul#menu li{
background-image: url(menu-bg.jpg);
background-repeat: repeat-x;
background-size: contain;
margin: 8px 2px;
box-shadow: 1px 1px 2px #1d1d1d;
padding: 5px 10px;
border-radius: 2px;
}

استایل وقتی که ماوس رو منو میاد؛ li:hover

ul#menu li:hover{
background-image: url(menu-hover-bg.jpg);
}
این قسمت برای وقتی که ماوس رو لینک میاد ، رنگ لینک تغییر کنه
ul#menu li:hover a{
color:#eef2f5;
}

استایل دادن به متن لینک منوها . li a

ul#menu li a{
color: #9fa8b0;
}

امیدوارم براتون مفید باشه و کاربردی. نظر یادتون نره ؛ اگه خوشتون اومد به دوستان پیشنهاد کنید.

همچنین بخوانید  آموزش سی اس اس : طراحی روبان گوشه ی باکس

دانلود فایل ها    حجم  ۲.۴ کیلوبایت

votes
رتبه دهی مطلب
css3html menuhtml5منوی وبسایتوبلاگ/اچ تی ام الوبلاگ/سی اس اس
پروژه مهندسی نرم افزار- یادگیری نمودار DFDمطلب قبلی
تگ های متا و تاثیر آن بر موتورهای جست و جومطلب بعدی
اشتراک
اطلاع از
Please login to comment
0 نظرات
Inline Feedbacks
View all comments

خوب است بدانید

  • انتشار مطلب در بلاگ بیان
  • چطور تصویر پروفایل در هدر قالب را تغییر دهم ؟
  • قالب های بلاگ بیان نیازمند فعالسازی جاوااسکریپت می باشد
  • نحوه ی نصب قالب های بلاگ بیان
  • نحوه ی استفاده از نشانه ها در بلاگ بیان

آخرین محصولات مارکت

  • قالب ریسپانسیو زمستان بلاگ بیان

    دانلود قالب ریسپانسیو زمستان بلاگ بیان

    ۳۹,۰۰۰ تومان
  • مطالب مرتبط بلاگ بیان

    مطالب مرتبط بلاگ بیان

    ۱۵,۰۰۰ تومان
  • قالب نوشتار بلاگ بیان

    قالب نوشتار بلاگ بیان

    ۳۰,۰۰۰ تومان
  • قالب مجله و خبری بلاگ بیان

    قالب مجله و خبری بلاگ بیان ماهتاک

    ۴۷,۰۰۰ تومان
  • قالب انحنای بلاگ بیان

    قالب انحنا بلاگ بیان

    امتیاز 5.00 از 5
    ۴۵,۰۰۰ تومان

آخرین مطالب

  • آموزش افزودن مطالب مرتبط قالب بلاگ بیان
    آموزش افزودن مطالب مرتبط قالب بلاگ بیان فروردین ۲۴, ۱۳۹۹
  • افزودن سایت خود به کنسول جستجوی گوگل
    افزودن سایت خود به کنسول جستجوی گوگل مرداد ۲۲, ۱۳۹۸
  • راهنما قالب شخصی بلاگ بیان
    راهنما قالب شخصی بلاگ بیان مرداد ۸, ۱۳۹۸
  • استایل نظرات مدیر بلاگ بیان را متفاوت نشان بده
    استایل نظرات مدیر بلاگ بیان را متفاوت نشان بده تیر ۲۳, ۱۳۹۸
  • قالب مجله ای و خبری ماهتاک بلاگ بیان
    قالب مجله ای و خبری ماهتاک بلاگ بیان تیر ۱۷, ۱۳۹۸
  • قالب ساز بلاگ تمز-ویدیو پیشنمایش قالب ساز بلاگ بیان
    قالب ساز بلاگ تمز-ویدیو پیشنمایش قالب ساز بلاگ بیان تیر ۷, ۱۳۹۸
  • راهنمای قالب انحنا بلاگ بیان
    راهنمای قالب انحنا بلاگ بیان تیر ۱, ۱۳۹۸
  • افزونه نمایش استوری بلاگ بیان
    افزونه نمایش استوری بلاگ بیان اردیبهشت ۴, ۱۳۹۸
  • آموزش ساخت قالب بلاگ بیان ، ایجاد لیست مطالب
    آموزش ساخت قالب بلاگ بیان ، ایجاد لیست مطالب فروردین ۱, ۱۳۹۸
  • دانلود قالب بلاگ بیان حرفه ای و ریسپانسیو
    دانلود قالب بلاگ بیان حرفه ای و ریسپانسیو بهمن ۳, ۱۳۹۷

دسته های محصولات

  • اسکریپت
  • افزونه بلاگ بیان
  • افزونه وردپرس
  • پروژه کامپیوتر
  • دسته بندی نشده
  • سئو
  • سورس نرم افزار آندروید
  • شرکتی
  • قالب HTML
  • قالب بلاگ بیان
  • قالب وردپرس
  • ووکامرس

سوالات متداول

  • انتشار مطلب در بلاگ بیان
  • چطور تصویر پروفایل در هدر قالب را تغییر دهم ؟
  • قالب های بلاگ بیان نیازمند فعالسازی جاوااسکریپت می باشد
  • نحوه ی نصب قالب های بلاگ بیان
  • نحوه ی استفاده از نشانه ها در بلاگ بیان

آخرین مطالب

  • آموزش افزودن مطالب مرتبط قالب بلاگ بیان
    آموزش افزودن مطالب مرتبط قالب بلاگ بیان
  • نحوه ی ارسال مطلب برای قالب فیلم و سریال بلاگ بیان
    نحوه ی ارسال مطلب برای قالب فیلم و سریال بلاگ بیان
  • افزودن سایت خود به کنسول جستجوی گوگل
    افزودن سایت خود به کنسول جستجوی گوگل
  • راهنما قالب شخصی بلاگ بیان
    راهنما قالب شخصی بلاگ بیان
©۱۳۹۷ بلاگ تمز ساخته شده با ♥؛ توسط تیم ماکاوب با استفاده از وردپرس و ووکامرس.
ورود ×
کد تایید
لطفاً کد تأیید ارسال شده را تایپ کنید
ثبت
رمز عبور را فراموش کرده اید؟
آیا حساب کاربری ندارید؟
ثبت نام
ارسال مجدد کد یکبار مصرف(00:30)
برگشت به ورود

ارسال مجدد کد یکبار مصرف (00:30)
برگشت به ورود
  • (+98) ایران
0
0
Would love your thoughts, please comment.x
()
x
| Reply