آموزش طراحی منوی افقی با HTML و CSS

در صورت مفید بودن این مقاله حتما نظر خودتان را در پایین مطلب برای ما ارسال کنید

4  آموزش طراحی منوی افقی با HTML و CSS

 با یکی دیگر از آموزشهای طراحی منو در خدمت شما هستم . تمام وب سایتهای اینترنتی دارای Menu می باشند و منو اصلی ترین بخش یک قالب وب سایت به شمار می آید که اگر بدرستی تنظیمات و رنگ آن انتخاب نشود ، دسترسی به قسمت های مختلف سایت تقریبا امکان پذیر نمی باشد . 
در این مقاله آموزشی با استفاده از Html و Css یک منوی افقی برای شما طراحی می کنم و آموزش آن را همراه با کد و تصاویری که در ادامه آماده کرده ام قرار میدهم. برای درک بهتر می توانید ابتدا دمو را مشاهده کرده و فایل اصلی را در پایان آموزش دانلود کنید . سعی کنید ابتدا یک بار آموزش را دقیق بخوانید سپس دمو را مشاهده و اگر به نتیجه نرسیدید از فایل اصلی استفاده کنید . 

1. نرم افزار دریم ویور یا نوت پد را باز کنید و تگهای تشکیل دهنده صفحه  HTML را همانند تصویر زیر داخل آن کپی کنید . 
برای تغییرات ظاهری منو هم باید یک فایل Styles.css ایجاد کرده و تگ آن را در بین تگ head همانند کدهای زیر قرار بدهیم . برای ایجاد فایل Styles.css کافیست ویرایشگر دریم ویور یا نوت پد را باز کرده و بدون وارد کردن هیچ کدی فایل را با نام Styles.css ذخیره کنید . 

 

 

<!doctype html>
<html >
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<link rel='stylesheet' href='/styles.css' type='text/css' />
<title>آموزش ساخت منوی عمودی با CSS</title>
</head>
<body>
</body>
</html>

 

2. در این مرحله نوبت میرسه به اضافه کردن منوها در داخل تگ body 

 با استفاده از تگ UL  و Li  منوها را داخل تگ Body  اضافه میکنم .

 

<ul id='menu'>
        <li><a href='#'>صفحه اصلی </a></li>
        <li>
            <a href='#'>درباره ما </a>
            <ul class='hidden'>
                <li><a href='#'>تاریخچه</a></li>
                <li><a href='#'>سابقه شرکت</a></li>
            </ul>
        </li>
        <li>
            <a href='#'>پروفایل کاربری </a>
            <ul class='hidden'>
                <li><a href='#'>فتوگرافی</a></li>
                <li><a href='#'>طراحی وب </a></li>
                <li><a href='#'>فتوشاپ</a></li>
            </ul>
        </li>
        <li><a href='#'>اخبار</a></li>
        <li><a href='#'>تماس با ما</a></li>
    </ul>

 



لینکهای شما باید به این صورت باشد .

1  آموزش طراحی منوی افقی با HTML و CSS

 

حالا باید تغییرات ظاهری را با استفاده از کد Css در فایل Styles.css وارد کنیم .
من مرحله به مرحله اینکار را انجام میدهم و با استفاده از تصاویری که قرار میدهم متوجه تغییرات خواهید شد . 

 ابتدا باید کدها را به سمت را انتقال بدهیم . برای انجام اینکار از دستور body {direction:rtl استفاده می شود . سپس باید  تمام لینکها را در یک خط قرار داده و پشت لینکها را رنگش را تغییر بدهیم . 

 

body {direction:rtl}
ul {
    list-style-type:none;
    margin:0;
    padding:0;
    position: absolute;
}
/*Create a horizontal list with spacing*/
li {
    display:inline-block;
    float: right;
    margin-right: 1px;
}
/*Style for menu links*/
li a {
    display:block;
    min-width:140px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    font-family: B yekan;
    color: #fff;
    background: #2f3036;
    text-decoration: none;
}

 



 

2  آموزش طراحی منوی افقی با HTML و CSS

 

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

 

/*Hover state for top level links*/
li:hover a {
    background: #19c589;
}
/*Style for dropdown links*/
li:hover ul a {
    background: #f3f3f3;
    color: #2f3036;
    height: 40px;
    line-height: 40px;
}
/*Hover state for dropdown links*/
li:hover ul a:hover {
    background: #19c589;
    color: #fff;
}
/*Hide dropdown links until they are needed*/
li ul {
    display: none;
}
/*Make dropdown links vertical*/
li ul li {
    display: block;
    float: none;
}
/*Prevent text wrapping*/
li ul li a {
    width: auto;
    min-width: 100px;
    padding: 0 20px;
}
/*Display the dropdown on hover*/
ul li a:hover + .hidden, .hidden:hover {
    display: block;
}

 



3  آموزش طراحی منوی افقی با HTML و CSS

 

مشاهده دمو  

دانلود فایل آموزش

آخرین بروز رسانیچهارشنبه, 18 شهریور 1394 10:01

نوشتن دیدگاه

تصویر امنیتی
تصویر امنیتی جدید

دیدگاه‌ها   

0 #2 سعید صبح خیز 1396-09-18 10:18
به نقل از قالیشویی:
چرا تغیر رنگ در زمینه سفید اعمال نمیشه؟
مشکل کجاست

سلام
مشکل میخورید باید کدها را از ابتدا بررسی کنید چون من دسترسی ندارم کدهای شما را چک کنم
از دمو هم می تونید کمک بگیرید
نقل قول کردن
0 #1 قالیشویی 1396-09-18 00:06
چرا تغیر رنگ در زمینه سفید اعمال نمیشه؟
مشکل کجاست
نقل قول کردن

آخرین مطالب آموزشی

«
  • 1
  • 2
  • 3
»