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

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

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

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

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

توسط 11 شهریور, 1392 8632 0

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

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;
}

 


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

این مورد را ارزیابی کنید
(1 رای)
آخرین ویرایش در چهارشنبه, 18 شهریور 1394 ساعت 10:04
کلیه حقوق متعلق است به فروشگاه آسارایان. طراحی و پشتیبانی: webriz
تک وب دیزاین-قالب فارسی جوملا