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

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

dmo

چند هفته ای بود که بدلیل تغییرات در سایت فروشگاه آسا رایان نتوانستم برای علاقه مندان به بخش آموزش مطلب مفیدی ایجاد کنم . به امید خدا سعی می کنم یک روز در میان یک آموزش به بخش های مختلف سایت اضافه کنم تا کاربران از آموزشهای مورد نظر استفاده کنند . در این بخش میخواهم یک منوی عمودی با Html . Css برای شما طراحی کنم . 

دموی منوی طراحی شده در مرورگر

 

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


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

Css-Dropdown-menu1

Css-Dropdown-menu2

بعد از باز شدن دو فایل ابتدا باید آنها را در پوشه ای که ایجاد کرده بودید ذخیره کنید ، برای ذخیره کردن هر دو فایل هم ، بر روی کلید File کلیک کرده و گزینه Save as را انتخاب کنید .  یک نام دلخواه برای هر دو فایل تایپ میکنم. معمولا برای فایل html نام index.html و برای فایل css یک نام دلخواه تایپ میکنم

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>آموزش طراحی منوی باز شو با HTML و CSS3</title>
   </head>
<body>
</body>
</html>

 



3.حالا باید از فایل html به css لینک بدهیم .دلیل اینکار هم این می باشد که تنظیمات مربوط به ظاهر و نحوه قرار گیری عناصر در صفحه بوسیله فایل CSS صورت می پذیرد . برای انجام اینکار از کد زیر در بین تگ head استفاده می کنم .  مسیر فایل css باید در قسمت href قرار بگیرد

 

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

 

4. مراحل ابتدایی کار تمام شد . اگر فراموش نکرده باشید و به آموزشهایی که در درس های قبل (آموزش طراحی منو با Css3  و آموزش ساخت منوی عمودی باز شو با CSS , ساخت یک منوی باز شو با HTML وCSS ) آموزش داده بودم دقت کرده باشید بعد از ایجاد لینک به فایل css نوبت میرسه به ایجاد بخش ها یا همان division در فایل index.html .

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

 

<!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' type='text/css' href='menu.css' />    
</head>
  <body>
     <div id='cssmenu'>
     </div>
  </body>
</html>

 



5. حالا باید لینکها را بین بخش Cssmenu اضافه کنم . لینکها را با 3 کلاس Class  در فایل index.html نشانه گذاری میکنم

 

 <!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' type='text/css' href='menu.css' />    
</head>
    <body>
        <div id='cssmenu'>
            <ul>
               <li class='active'><a href='#'>صفحه اصلی</a></li>
               <li class='has-sub'><a href='#'>محصولات</a></li>
               <li><a href='#'>درباره ما</a></li>
               <li class='last'><a href='#'>تماس با ما</a></li>
            </ul>
        </div>
    </body>
</html>

 



 امیدوارم تا به این قسمت سخت نبوده باشد . بعد از اعمال این تغییرات نتیجه را در مرورگر مشاهده کنید

CSS-Menu-ASARAYAN1

لینک محصولات دارای دو زیر مجموعه بوده که آن دو زیر مجموعه هم دارای دو لینک می باشد

ابتدا فقط کدهایی که به لینک محصولات اضافه شده است را قرار میدهم و در مرحله بعدی کد کلی

 

<li class='has-sub'><a href='#'>محصولات</a>
                  <ul>
                     <li class='has-sub'><a href='#'>تبلت</a>
                        <ul>
                           <li><a href='#'>لنوو</a></li>
                           <li class='last'><a href='#'>پرستیژیو</a></li>
                        </ul>
                     </li>
                     <li class='has-sub'><a href='#'>لپ تاپ</a>
                        <ul>
                           <li><a href='#'>دل</a></li>
                           <li class='last'><a href='#'>اچ پی</a></li>
                        </ul>
                     </li>
                  </ul>
               </li>

 



کد کلی

 

<!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' type='text/css' href='menu.css' />    
</head>
    <body>
        <div id='cssmenu'>
            <ul>
               <li class='active'><a href='#'>صفحه اصلی</a></li>
               <li class='has-sub'><a href='#'>محصولات</a>
                  <ul>
                     <li class='has-sub'><a href='#'>تبلت</a>
                        <ul>
                           <li><a href='#'>لنوو</a></li>
                           <li class='last'><a href='#'>پرستیژیو</a></li>
                        </ul>
                     </li>
                     <li class='has-sub'><a href='#'>لپ تاپ</a>
                        <ul>
                           <li><a href='#'>دل</a></li>
                           <li class='last'><a href='#'>اچ پی</a></li>
                        </ul>
                     </li>
                  </ul>
               </li>
               <li><a href='#'>درباره ما</a></li>
               <li class='last'><a href='#'>تماس با ما</a></li>
            </ul>
        </div>
    </body>
</html>

 



تغییرات نهایی تا به این مرحله

CSS-Menu-ASARAYAN2

بسیار خوب کار ما با فایل Index.html  تمام شد . نوبت میرسه به تنظیمات مربوط به ظاهر و نحوه قرار گیری منو در صفحه

فایل menu.css را باز کرده و به ترتیب کدهای زیر را در آن قرار بدهید .

ابتدا باید مشخص کنیم که منو از طرفین فاصله ای نداشته باشد

 

/* Some stylesheet reset */
#cssmenu ul {
  margin: 0;
  padding: 0;
}

 



دمو در مرورگر

CSS-Menu-ASARAYAN3

حالا باید تنظیمات مربوط به عرض منو ، ارتفاع ، نوع رنگ پس زمینه ، انحنای دور لبه ها ، اندازه لینکها و نوع فونت آنها را مشخص کنیم

 

 /* The container */
#cssmenu ul {
  display: block;
  position: relative;
  width: 150px;
}
/* The list elements which contain the links */
#cssmenu ul li {
  display: block;
  position: relative;
  margin: 0;
  padding: 0;
  width: 100%;
}
/* General link styling */
#cssmenu ul li a {
  display: block;
  position: relative;
  margin: 0;
  border-top: 1px dotted #fff;
  border-bottom: 1px dotted #d9d9d9;
  padding: 11px 20px;
  font-family: tahoma, Arial, sans-serif;
  color: #e4433c;
  text-decoration: none;
  text-transform: uppercase;
  text-shadow: 0 1px 0 #fff;
  font-size: 13px;
  font-weight: 300;
  background: #eaeaea;
}

 



 دمو در مرورگر

CSS-Menu-ASARAYAN4

6. نوبت میرسه به گرد کردن لبه های بالا و پایین منو

 

/* Rounded corners for the first link of the menu/submenus */
#cssmenu ul li:first-child a {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  border-top: 0;
}
/* Rounded corners for the last link of the menu/submenus */
#cssmenu ul li:last-child a {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  border-bottom: 0;
}

 



دمو در مرورگر

CSS-Menu-ASARAYAN5

حالا می خواهیم وقتی بر روی یک منو ماوس را نگاه میداریم رنگ لینک تغییر کند

من از علامت '<' در دستورات Css استفاده کرده ام. این علامت مربوط به انتخاب تمام بچه های یک عنصر مادر می باشد

 

/* The hover state of the menu/submenu links */
#cssmenu > ul li a:hover,
#cssmenu > ul li:hover > a {
  color: #ffffff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
  background: #f23f37;
  background: -webkit-linear-gradient(#f23f37, #e7180f);
  background: -moz-linear-gradient(#f23f37, #e7180f);
  background: linear-gradient(#f23f37, #e7180f);
  border-color: transparent;
} 

 



دمو در مرورگر

CSS-Menu-ASARAYAN6

 در مرحله آخر هم تنظیمات مربوط به زیر مجموعه ها را در یک خط می نویسم .



/* The arrow indicating a submenu */
#cssmenu > ul .has-sub > a::after {
  content: '';
  position: absolute;
  top: 16px;
  right: 10px;
  width: 0px;
  height: 0px;
  border: 4px solid transparent;
  border-left: 4px solid #e4433c;
}
/* The same arrow, but with a darker color, to create the shadow effect */
#cssmenu > ul .has-sub > a::before {
  content: '';
  position: absolute;
  top: 17px;
  right: 10px;
  width: 0px;
}
/* Changing the color of the arrow on hover */
#cssmenu > ul li > a:hover::after,
#cssmenu > ul li:hover > a::after {
  border-left: 4px solid #fff;
}
#cssmenu > ul li > a:hover::before,
#cssmenu > ul li:hover > a::before {
  border-left: 4px solid rgba(0, 0, 0, 0.25);
}
/* THE SUBMENUS */
#cssmenu > ul ul {
  position: absolute;
  left: 100%;
  top: -9999px;
  padding-left: 5px;
  opacity: 0;
  width: 150px;
  /* The fade effect, created using an opacity transition */
  -webkit-transition: opacity 0.3s ease-in;
  -moz-transition: opacity 0.3s ease-in;
  transition: opacity 0.3s ease-in;
}
#cssmenu > ul ul li a {
  font-size: 12px;
}
/* Showing the submenu when the user is hovering the parent link */
#cssmenu > ul li:hover > ul {
  top: 0px;
  opacity: 1;
  z-index: 1;
}

 



کد کلی صفحه index.html

 

<!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' type='text/css' href='menu.css' />    
</head>
    <body>
        <div id='cssmenu'>
            <ul>
               <li class='active'><a href='#'>صفحه اصلی</a></li>
               <li class='has-sub'><a href='#'>محصولات</a>
                  <ul>
                     <li class='has-sub'><a href='#'>تبلت</a>
                        <ul>
                           <li><a href='#'>لنوو</a></li>
                           <li class='last'><a href='#'>پرستیژیو</a></li>
                        </ul>
                     </li>
                     <li class='has-sub'><a href='#'>لپ تاپ</a>
                        <ul>
                           <li><a href='#'>دل</a></li>
                           <li class='last'><a href='#'>اچ پی</a></li>
                        </ul>
                     </li>
                  </ul>
               </li>
               <li><a href='#'>درباره ما</a></li>
               <li class='last'><a href='#'>تماس با ما</a></li>
            </ul>
        </div>
    </body>
</html>

 



کد صفحه menu.css

 

/* Some stylesheet reset */
#cssmenu ul {
  margin: 0;
  padding: 0;
}
/* The container */
#cssmenu ul {
  display: block;
  position: relative;
  width: 150px;
}
/* The list elements which contain the links */
#cssmenu ul li {
  display: block;
  position: relative;
  margin: 0;
  padding: 0;
  width: 100%;
}
/* General link styling */
#cssmenu ul li a {
  display: block;
  position: relative;
  margin: 0;
  border-top: 1px dotted #fff;
  border-bottom: 1px dotted #d9d9d9;
  padding: 11px 20px;
  font-family: tahoma, Arial, sans-serif;
  color: #e4433c;
  text-decoration: none;
  text-transform: uppercase;
  text-shadow: 0 1px 0 #fff;
  font-size: 13px;
  font-weight: 300;
  background: #eaeaea;
}
/* Rounded corners for the first link of the menu/submenus */
#cssmenu ul li:first-child a {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  border-top: 0;
}
/* Rounded corners for the last link of the menu/submenus */
#cssmenu ul li:last-child a {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  border-bottom: 0;
}
/* The hover state of the menu/submenu links */
#cssmenu > ul li a:hover,
#cssmenu > ul li:hover > a {
  color: #ffffff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
  background: #f23f37;
  background: -webkit-linear-gradient(#f23f37, #e7180f);
  background: -moz-linear-gradient(#f23f37, #e7180f);
  background: linear-gradient(#f23f37, #e7180f);
  border-color: transparent;
}
/* The arrow indicating a submenu */
#cssmenu > ul .has-sub > a::after {
  content: '';
  position: absolute;
  top: 16px;
  right: 10px;
  width: 0px;
  height: 0px;
  border: 4px solid transparent;
  border-left: 4px solid #e4433c;
}
/* The same arrow, but with a darker color, to create the shadow effect */
#cssmenu > ul .has-sub > a::before {
  content: '';
  position: absolute;
  top: 17px;
  right: 10px;
  width: 0px;
  height: 0px;
  border: 4px solid transparent;
  border-left: 4px solid #fff;
}
/* Changing the color of the arrow on hover */
#cssmenu > ul li > a:hover::after,
#cssmenu > ul li:hover > a::after {
  border-left: 4px solid #fff;
}
#cssmenu > ul li > a:hover::before,
#cssmenu > ul li:hover > a::before {
  border-left: 4px solid rgba(0, 0, 0, 0.25);
}
/* THE SUBMENUS */
#cssmenu > ul ul {
  position: absolute;
  left: 100%;
  top: -9999px;
  padding-left: 5px;
  opacity: 0;
  width: 150px;
  /* The fade effect, created using an opacity transition */
  -webkit-transition: opacity 0.3s ease-in;
  -moz-transition: opacity 0.3s ease-in;
  transition: opacity 0.3s ease-in;
}
#cssmenu > ul ul li a {
  font-size: 12px;
}
/* Showing the submenu when the user is hovering the parent link */
#cssmenu > ul li:hover > ul {
  top: 0px;
  opacity: 1;
  z-index: 1;
}

 


دموی منوی طراحی شده در مرورگر

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

نوشتن دیدگاه

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

دیدگاه‌ها   

0 #11 متین 1394-08-14 23:41
سلام من این کد رو درس کردم حالا میخواستم تو ابزارک وردپرس این منو رو نشون بدم ! حالا من باید چه کدهایی رو تو ابزارک بزارم تا تو ابزارک وردپرس سایتم نشون بده؟
ممنون میشم جواب رو به ایمیلم ارسال کنین تا با خبر شم که جواب دادین
نقل قول کردن
0 #10 محسن 1394-04-31 13:40
به نقل از الهام:
با سلام...آیا شما می دونید که چرا border-bottom که در عناصر li تعریف شده تا انتها ادامه پیدا نکرده..؟
2shared.com/.../22_online.html

برای رسید به نتیجه باید کد نمونه را دانلود و با کد خودتون مطابقت بدید که زودتر به نتیجه برسید
یا مرحل به مرحله نسبت به توضیحات آقای صبح خیز کد بنویسید
بدلیل اینکه چک کردن کدهای منو شما زمان زیادی میبره
نقل قول کردن
0 #9 الهام 1394-04-31 12:47
با سلام...آیا شما می دونید که چرا border-bottom که در عناصر li تعریف شده تا انتها ادامه پیدا نکرده..؟
2shared.com/.../22_online.html
نقل قول کردن
0 #8 سعید صبح خیز 1394-04-13 16:49
به نقل از الهام:
وای ... ممنون درست شد....
از کجا فهمیدین؟
این کدها برای من خیلی سخته....به نظرتون با تمرین بیشتر منم می تونم یاد بگیرم....آخه هر چی باهاشون کلنجار می رم هیچ قاعده و قانون خاصی توشون نمی تونم پیدا کنم...

بله با تمرین به نتیجه میرسید
نقل قول کردن
0 #7 الهام 1394-04-13 15:55
وای ... ممنون درست شد....
از کجا فهمیدین؟
این کدها برای من خیلی سخته....به نظرتون با تمرین بیشتر منم می تونم یاد بگیرم....آخه هر چی باهاشون کلنجار می رم هیچ قاعده و قانون خاصی توشون نمی تونم پیدا کنم...
نقل قول کردن
0 #6 سعید صبح خیز 1394-04-13 09:22
به نقل از الهام:
من در حال طراحی یک منوی ساده با css هستم.
می خواهم با استفاده از خاصیت display زیر منوها رو به طور موقت پنهان کنم اما بعد از استفاده از کد display:none باز هم زیر منوها نمایش داده می شوند….شما می دانید علت جیست؟ این هم لینکش
2shared.com/.../e6_online.html

سلام
اینکار را انجام ندید چون کدهاتون زیاد بشه با مشکل مواجه میشید
از طریق کامنت نویسی اقدام کنید

وارد کردن کامنت در متن اچ تی ام ال


نحوه کامنت گذاری در کدهای سی اس اس (CSS)
/* این یک کامنت است */

در مورد زیر مجموعه هم display :none را باید برای تگ a قرار بدید

کد مورد نظر را بین این کامنتها قرار بدید
نقل قول کردن
0 #5 الهام 1394-04-12 17:02
من در حال طراحی یک منوی ساده با css هستم.
می خواهم با استفاده از خاصیت display زیر منوها رو به طور موقت پنهان کنم اما بعد از استفاده از کد display:none باز هم زیر منوها نمایش داده می شوند….شما می دانید علت جیست؟ این هم لینکش
2shared.com/.../e6_online.html
نقل قول کردن
0 #4 رضا 1394-04-12 09:29
به نقل از الهام:
#cssmenu > ul .has-sub > a::after {
content: '';
position: absolute;
top: 16px;
right: 10px;
width: 0px;
height: 0px;
border: 4px solid transparent;
border-left: 4px solid #e4433c;
}
میشه بگید این کد که در مثال بالا گفته شده دقیقا معنیش چیه؟یعنی چی کار می کنه؟ ممنون

این کد مربوط به آیکون زیر مجموعه ها است
مقدار position: absolute; را به fixed تغییر بدید تا بهتر متوجه شید
نقل قول کردن
0 #3 الهام 1394-04-12 08:53
#cssmenu > ul .has-sub > a::after {
content: '';
position: absolute;
top: 16px;
right: 10px;
width: 0px;
height: 0px;
border: 4px solid transparent;
border-left: 4px solid #e4433c;
}
میشه بگید این کد که در مثال بالا گفته شده دقیقا معنیش چیه؟یعنی چی کار می کنه؟ ممنون
نقل قول کردن
0 #2 رضا 1394-04-12 00:52
به نقل از الهام:
سلام....میشه بگید کدوم کد باعث مخفی شدن زیرمنوها میشه؟

سلام
کدی برای مخفی کردن نیست . فقط در css با استفاده از یکسری از تگها دستور داده میشه که وقتی موس رفت روی تگ UL که دارای زیر مجموعه LI بود 200 پیکسل به طرف راست یا چپ منو نمایش داده بشه
نقل قول کردن

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

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