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

          Admin 
            بازدید : 146
          جمعه 21 شهریور 1393
           نظرات (0)
        

با یکی دیگر از آموزشهای طراحی منو در خدمت شما هستم . تمام وب سایتهای اینترنتی دارای 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>

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

حالا باید تغییرات ظاهری را با استفاده از کد 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;
}

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

/*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;
}