ورود به اکانت شما

نام کاربری *
رمز عبور *
مرا بخاطر بسپار

ایجاد حساب کاربری

فیلد های ستاره دار را پر کنید.
نام *
نام کاربری *
رمز عبور *
تکرار رمز عبور *
ایمیل *
تکرار ایمیل *
کپچا *
بارگذاری کپچا

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

توسط 20 شهریور, 1393 7907 0

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

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
کلیه حقوق متعلق است به فروشگاه آسارایان. طراحی و پشتیبانی: webriz
تک وب دیزاین-قالب فارسی جوملا