>

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

    توسط 20 شهریور, 1393 7635 دیدگاه (2)

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

    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

     

    مشاهده دمو  

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

    این مورد را ارزیابی کنید
    (2 رای‌ها)
    آخرین ویرایش در چهارشنبه, 18 شهریور 1394 10:01

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

    «
    • 1
    • 2
    • 3
    »
    © 2015 Your Company. All Rights Reserved. Designed By JoomShaper

    Please publish modules in offcanvas position.

    تک وب دیزاین-قالب فارسی جوملا