پشتیبانی و مشاوره : 09159129565 - 05138555815
ثبت نام
سبد خرید(0)
شما اینجا هستید

آموزش html و css ساخت منو و زیر منو های کشویی

آموزش html و css ساخت منو و زیر منو های کشویی
hafez rezaee 21 دی 94 مقالات طراحی سایت, وبلاگ بدون نظر 1962 بازدید

منوی های کشویی از پرکاربردترین موارد در آموزش html هستند.

یکی از امکاناتی که خیلی از وب سایت ها از اون استفاد می کنند و خیلی از طراح های وب اونها رو در کارها بکار میگیرند، ایجاد منوی های کشوئی یا DropDown Menu می باشد. در این مطلب آموزشی به صورت گام به گام خدمت دوستان نحوه ایجاد این منوها رو بوسیله HTML و CSS آموزش می دهیم.

در گام اول کد HTML مربوط به منوی اصلی رو مینویسیم. اصول طراحی منوها در HTML و CSS بوسیله تگ ul انجام شده و برای ایجاد منوی اصلی وب سایت کد HTML زیر رو در یک فایل با پسوند html (برای مثال menu.html) ذخیره کنید:

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<head>
    <title>DropDown Menu with HTML and CSS</title>
</head>
<body>
    <div id="nav">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Community</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div>
</body>
</html>

 

 

 

 

 

 

 

 

 

 

خوب تا اینجا یک کد HTML ساده هست و با باز کردن فایل html در مرورگر، تنها یک لیست ساده نمایش داده می شود. برای ادامه باید با کمک CSS منوی اصلی را استایل دهی کنیم. برای ای ن کار در بخش head داخل تگ style کدهای CSS زیر را اضافه می کنیم:

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
*{
    margin: 0;
    padding: 0;
}
.clear-fix{
    clear: both;
}
a{
    text-decoration: none;
}
#nav{
    background-color: black;
    border-bottom: 2px solid darkred;          
}
#nav ul{
    list-style: none;
}
#nav li{
    position: relative;
}
#nav > ul > li{
    float: left;           
}
#nav > ul > li > a{
    display: inline-block;
    color: white;
    padding: 0 10px;
    line-height: 30px;
}
#nav > ul > li:hover > a{
    background-color: darkred;
    color: white;
}

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 
خوب تا اینجای کار ساخت منوی اصلی ما به پایان رسید. تصویر کار شما باید به صورت زیر باشه:

آموزش html ساخت منوی کشویی

 

در مرحله بعد باید برای منوی های مورد نظرمون زیر منو تعریف کنیم. برای اینکار باید داخل تگ های li مربوطه یک تگ ul دیگه برای منوها تعریف کنیم. برای مثال، فرض کنیم در نظر داریم برای منوی Community زیر منوهای Forum، PodCasts و Videos رو ایجاد کنیم. برای اینکار کد HTML مربوط به بخش Community رو به شکل زیر تغییر می دهیم:

1
2
3
4
5
6
7
8
9
10
<li><a href="#">Home</a></li>
<li>
    <a href="#">Community</a>
    <ul class="sub-menu">
        <li><a href="#">Forum</a></li>
        <li><a href="#">PodCasts</a></li>
        <li><a href="#">Videos</a></li>
    </ul>
</li>
<li><a href="#">Blog</a></li>

دقت کنید که برای ul زیر منو کلاس sub-menu تخصیص داده شده تا بتونیم در تگ style، استایل های مربوطه رو اعمال کنیم. حالا باید کد CSS مربوط به زیر منو رو بنویسیم. برای اینکار کدهای زیر را به تگ style اضافه می کنیم:

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/* styles for sub menu */
#nav .sub-menu{
    display: none;
    position: absolute;        
}
#nav .sub-menu > li > a{
    display: block;
    width: 120px;
    background-color: darkred;
    color: white;
    padding: 5px 10px;
}
#nav .sub-menu > li:hover > a{
    background-color: orange;
}
#nav li:hover > .sub-menu{
    display: block;
}      

 

 

 

 

 

 

 

 

 

 

 

 

 

با افزودن کد بالا و باز کردن صفحه، نتیجه کار باید به صورت زیر باشد:

منوی کشویی

در اینجا باید به یک نکته مهم توجه کرد که position تمام تگ های li به حالت relative و position تمام ul هایی که کلاس sub-menu رو دارند (زیر منوها) از نوع absolute تعریف شده. دلیل اینکار اینکه که تگ ul زیر منو داخل li فضایی رو اشغال نکنه و بتونیم داخل تگ li جایگاهش رو تغییر بدیم. در صورتی که position ها رو اعمال نمی کردیم، نتیجه به صورت زیر می شد:

 

منوی کشویی

 

خوب تا اینجا ما تونستیم یک مرحله زیر منو به منوهای اصلی اضافه کنیم. حالا فرض کنیم بخواییم به هر یک زیر منوها هم یک زیر منوی دیگه اضافه کنیم و این کار به صورت درختی تا هر مرحله ای که خواستیم ادامه بدیم. برای مثال، فرض کنید تصمیم داریم زیر منوی Videos در منوی Community دارای زیر منوی های Programming، Database و Network باشه و خود زیر زیر منوی Database دارای زیر منوهای SQL Server، Oralce و MySQL باشه. برای اینکار ابتدا کد HTML بخش Community رو به صورت زیر تغییر می دهیم:

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<li>
    <a href="#">Community</a>
    <ul class="sub-menu">
        <li><a href="#">Forum</a></li>
        <li><a href="#">PodCasts</a></li>
        <li>
            <a href="#">Videos</a>
            <ul class="sub-menu">
                <li><a href="#">Programming</a></li>
                <li>
                    <a href="#">Database</a>
                    <ul class="sub-menu">
                        <li><a href="#">SQL Server</a></li>
                        <li><a href="#">Oracle</a></li>
                        <li><a href="#">MySQL</a></li>
                    </ul>
                </li>
                <li><a href="#">Network</a></li>
            </ul>
        </li>
    </ul>
</li>

 

 

 

 

 

 

 

 

 

 
اگر صفحه html رو داخل مرورگر باز کنیم، نتیجه به صورت زیر خواهد بود:

 

5

 

اما نتیجه هنوز مورد نظر ما نیست، برای اینکه زیر منوهایی که زیر مجموعه یک زیر منوی دیگه هستند، باید جلوی منو باز بشوند، زیر زیر آن. برای اینکار باید موقعیت sub-menu هایی داخل یک sub-menu هستند رو تنظیم بکنیم. برای اینکار کد CSS زیر رو به تگ style صفحه اضافه می کنیم:

 

1
2
3
4
5
/* styles for sub-menu under sub-menu */
#nav .sub-menu > li > .sub-menu{
    left: 140px;
    top: 0;
}

با افزودن کد بالا و باز کردن صفحه در مرورگر، نتیجه به صورت زیر خواهد بود:

 

آموزش html منوی کشویی css

نظر شما در مورد این مطلب چیست ؟بدون نظر

معادله امنیتی *