آموزش طراحی منو با Css3

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

Css-Dropdown-menudemo

مشاهده دموی آموزش

هفته گذشته آموزش Css3 را در بخش طراحی قالب ایجاد کرده ام  و تمام بخش ها و ویژگیهای جدید را با عنوان یک مثال آموزش داده ام  .
امروز می خواهم با استفاده از Css3 یک منو بازشو برای علاقه مندان به طراحی قالب وب سایت طراحی کنم .


1. ابتدا  نرم افزار دریم ویور را اجرا کنید . (در صورتیکه نرم افزار دریم ویور بر روی سیستم شما نصب نشده است می توانید از یک نرم افزار ویرایشگر متن مثل Nootpad++ استفاده کنید یا از نرم افزار نوت پد خود ویندوز)
برای شروع باید یک فایل Html و یک فایل Css ایجاد کنیم . (یک فولدر بر روی دسکتاپ یا یکی از درایوهایتان ایجاد کنید و هر دو فایل را داخل آن ذخیره کنید )


بر روی کلید File کلیک کرده و گزینه New را انتخاب کنید .  صفحه New Document باز می شود  .یکبار بر روی گزینه Html و بار دیگر گزینه Css را انتخاب کنید . یک نام دلخواه برای دو فایل قرار داده و در پوشه مورد نظر ذخیره کنید .  

Css-Dropdown-menu1

Css-Dropdown-menu2

برای ذخیره کردن هر دو فایل هم ، بر روی کلید File کلیک کرده و گزینه Save as را انتخاب کنید .  یک نام دلخواه برای هر دو فایل تایپ میکنم

Css-Dropdown-menu3

Css-Dropdown-menu4

Css-Dropdown-menu5

2. ابتدا عنوان صفحه را در بین تگ Title وارد میکنم . این عنوان در مرورگر نمایش داده می شود  . (اگر از نوت پد یا هر ویرایشگر دیگری استفاده می کنید که کدهای ابتدایی Html درون آن وجود ندارد ، کدهای زیر را کپی کرده و در فایل html قرار بدهید و ذخیره کنید)

 

<!DOCTYPE html >
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<title>آموزش طراحی منو</title>
</head>
<body>
</body>
</html>

 



3.حالا باید از فایل html به css لینک بدهیم . برای انجام اینکار از کد زیر در بین تگ head استفاده می کنم .  مسیر فایل css باید در قسمت href قرار بگیرد

 

<link rel='stylesheet'  href='menu.css'  type='text/css' />

 



 

4. بعد از تعیین عنوان صفحه  تصویر پس زمینه را در فایل Css و با استفاده از تگ Body تغییر میدهم . (دانلود تصویر پس زمینه)

 

body {
    background-image: url('bg.png');
    font-family: tahoma;    
}

 



5. ساختار کلیه کدها در فایل index.html می باشد و تغییرات مربوط به ظاهر آنها در فایل menu.css . ابتدا باید بین تگ body یک تگ UL ایجاد کنم و یک class بوجود بیاورم تا از طریق فایل menu.css بتوانم تغییرات دلخواه را اعمال کنم . 
به کدهایی که در زیر نوشته ام دقت کنید ، روش انجام کار را متوجه می شوید.

 

<ul class='menu'></ul>

 



مبنا را بر این قرار میدهم که افراد مبتدی نیز بخواهند از این آموزش استفاده کنند به همین دلیل کدها را به صورت کامل هم جهت استفاده شما قرار میدهم .

کد بالا باید به صورت زیر در ساختار کلی قرار بگیرد 

 

<!DOCTYPE html >
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<link rel='stylesheet' href='menu.css' type='text/css' />
<title>آموزش طراحی منو</title>
</head>
<body>
    <ul class='menu'></ul>
</body>
 </html>

 



 

وارد فایل Css شده و کدهای Reset مرورگر را تایپ میکنم . 

 

/* Reset */
.menu,
.menu ul,
.menu li,
.menu a {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
}

 



 

حالا باید به مرورگر با استفاده از کد زیر دستور بدهیم که منو را در وسط صفحه و با فاصله 150 پیکسل از بالا  قرار بده .

 

/* Positioning */
ul.menu {
    margin: 150px auto 0 auto;
}

 



 

منویی که قصد آموزش آن را دارم دارای 40 پیکسل ارتفاع ، 590 پیکسل عرض ، رنگ پس زمینه #4c4e5a و انحنا لبه های کادر 5 پیکسل می باشد .

کدهای زیر را درون فایل menu.css کپی کنید و نتیجه را درمرورگر مشاهده نمائید .



/* Menu */
.menu {
    height: 40px;
    width: 590px;
    background: #4c4e5a;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    background: linear-gradient(top, #535562 0%, #202023 100%);
    background: -moz-linear-gradient(top, #535562 0%, #202023 100%);
    background: -webkit-linear-gradient(top, #535562 0%, #202023 100%);        
    background: -ms-linear-gradient(top, #535562 0%, #202023 100%);    
}

 



نوبت میرسه به ایجاد لینکهای اصلی بین تگ ul در index.html

 

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

 



ساختار کلی کد برای افراد مبتدی

<!DOCTYPE html >
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<link rel='stylesheet' href='menu.css' type='text/css' />
<title>آموزش طراحی منو</title>
</head>
<body>
<ul class='menu'>    
    <li><a href='#'>صفحه اصلی</a></li>
    <li><a href='#'>درباره شرکت</a></li>            
    <li><a href='#'>تاریخچه</a></li>            
    <li><a href='#'>مدیریت</a></li>        
    <li><a href='#'>تماس با ما</a></li>            
    <li><a href='#'>نقشه سایت</a></li>    
</ul>
</body>
</html>

 



 

حال اگر مرورگر را ذخیره کنید و لینکها را مشاهده کنید ، خروجی به شکل زیر می باشد 

Css-Dropdown-menu6

 بعضی از لینکها دارای زیر مجموعه می باشد . به کدهای زیر دقت کنید که روش اضافه کردن لینکهای زیر مجموعه لینک اصلی به چه شکلی می باشد  . بدلیل اینکه لینک های زیر مجموعه دارای رنگ متفاوت با منوی اصلی می باشند برای هر کدام از آنها یک کلاس ایجاد کرده ام .

3 لینک در زیر مجموعه تاریخچه قرار می گیرد . کافیست قبل از اینکه تگ li لینگ تاریخچه منوی اصلی بسته شود یک تگ Ul همراه با هر چند زیر مجموعه با تگ li ایجاد کنیم  .

Css-Dropdown-menu7

 

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

 



 

مرحله بالا را برای زیر مجموعه های دیگر تکرار میکنم .

Css-Dropdown-menu8

حال نوبت میرسه به تغییرات ظاهری در فایل menu.css

اول باید لینکها رابه سمت راست  و از حالت عمودی به افقی لینکها را تغییر وضعیت بدهیم

 

.menu li {
    list-style: none;
    float: right;
    direction:rtl;
    display: block;
    height: 40px;
    position: relative;
}

 



Css-Dropdown-menu9

Css-Dropdown-menu10

در مرحله بعدی باید رنگ ، اندازه ، فاصله از طرفین را تعیین کنم .

 

/* Links */
.menu li a {
    display: block;
    text-decoration: none;
    color: #FFF;
    font-size: 15px;
    padding: 0 15px;
    margin: 5px 0;
    line-height: 30px;
    border-left: 1px solid #393942;
    border-right: 1px solid #393942;
    transition: color .3s ease;
    -moz-transition: color .3s ease;
    -webkit-transition: color .3s ease;
    -ms-transition: color .3s ease;            
}

 



Css-Dropdown-menu11

 در مرحله آخر هم نوبت میرسه به تغییرات ظاهری مربوط به submenu

 

 

/* Sub Menu */
.menu ul {
    position: absolute;
    opacity: 0;
    background: #575a62;    
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;            
    transition: opacity .25s ease .1s;
    -moz-transition: opacity .25s ease .1s;
    -webkit-transition: opacity .25s ease .1s;
    -ms-transition: opacity .25s ease .1s;                
}
.menu li:hover > ul {
    opacity: 1;
}
.menu ul li {
    height: 0;
    overflow: hidden;
    padding: 0;
}
.menu li:hover > ul li {
    height: auto;
    overflow: visible;
}
.menu ul li a {
    width: 100px;
    margin: 0;
    padding: 5px 15px;
    border: none;
    border-bottom: 1px solid #353539;    
}
.menu ul li:last-child a { border: none; }
.menu li:hover > a { color: #b94861; }
.menu li:first-child a { border-left: none; }
.menu li:last-child a { border-right: none; }

 

مشاهده دمو

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

نوشتن دیدگاه

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

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

«
  • 1
  • 2
  • 3
»
تک وب دیزاین-قالب فارسی جوملا