آموزش طراح منوی افقی چشمک زن با Html و Css3

ویژه آموزش طراح منوی افقی چشمک زن با Html و Css3

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

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

ابتدا تصویر بکار برده شده در منو را از این قسمت دانلود و در محلی که می خواهید فایل index.html را ذخیره کنید قرار بدهید .

1. ابتدا یک ویرایشگر مثل نوت پد ، دریم ویور یا هر برنامه ای که بتوانید یکسری کد را درون آن تایپ کنید باز کرده و کدهای ابتدایی Html را همانند تصویر زیر درون آن تایپ کنید .

<!DOCTYPE html>
<html>
   <head>
   </head>
              <body>
              </body>
</html>

 

2. سپس یک دیویژن با عنوان <div id="menu12"> درون تگ body ایجاد کنید تا استایل را با استفاده از این کلاس فراخوانی کنیم .

<div id="menu12"></div>

 

3. سپس با استفاده از تگ UL  و LI  لینکهای مورد نظر را درون دیویژن که ایجاد کرده ایم تایپ میکنم .

<body><div id="menu12">
 <ul>
  <li><a href="#1" title="Link 1">Link 1</a></li>
  <li><a href="#2" title="Link 2">Link 2</a></li>
  <li><a href="#3" title="Link 3">Link 3</a></li>
  <li><a href="#4" title="Link 4">Link 4</a></li>
  <li><a href="#5" title="Link 5">Link 5</a></li>
 </ul>
</div>

 

3. در مرحله بعدی یک تگ <style> بین تگ head ایجاد کرده و کدهای زیر را درون آن کپی کنید .سپس فایل را با عنوان index.html ذخیره کنید .

<!DOCTYPE html>
<html>
   <head>
    <style>
    #menu12 {
    width: 200px;
    margin: 10px;
    }
#menu12 li a {
    height: 32px;
      voice-family: inherit;
      height: 22px;
    text-decoration: none;
}    
#menu12 li a:link, #menu12 li a:visited {
    color: #666;
    display: block;
    background:  url(menu12.gif);
    padding: 10px 0 0 35px;
}    
#menu12 li a:hover {
    color: #000;
    background:  url(menu12.gif) 0 -32px;
    padding: 10px 0 0 35px;
}
#menu12 ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
</style>      
   </head>
<body><div id="menu12">
 <ul>
  <li><a href="#1" title="Link 1">Link 1</a></li>
  <li><a href="#2" title="Link 2">Link 2</a></li>
  <li><a href="#3" title="Link 3">Link 3</a></li>
  <li><a href="#4" title="Link 4">Link 4</a></li>
  <li><a href="#5" title="Link 5">Link 5</a></li>
 </ul>
</div>
</body>
</html>

 

مشاهده دمو در مرورگر

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

نوشتن دیدگاه

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

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

«
  • 1
  • 2
  • 3
»