تاپیک برتر فروردین 94 : شعر به علاوه گرافیک
در این تاپیک طرح های گرافیکی تلفیق شعر و گرافیک قرار گرفته است.
  • مشاهده تاپیک برتر
  • تبلیغات   تبلیغات
    نمایش نتایج: از شماره 1 تا 3 , از مجموع 3

    موضوع: ساخت منوی کشویی با css

    1. #1

      http://www.graphiran.com/wp-content/uploads/2013/01/1.pnghttp://www.graphiran.com/wp-content/uploads/2013/01/1.pnghttp://www.graphiran.com/wp-content/uploads/2013/01/1.pnghttp://www.graphiran.com/wp-content/uploads/2013/01/1.pnghttp://www.graphiran.com/wp-content/uploads/2013/01/1.png
      داروغه انجمن
      تاریخ عضویت
      Jun 2012
      عنوان کاربر
      داروغه انجمن
      شماره عضویت
      1556
      محل سکونت
      iRaN
      سن
      24
      نوشته ها
      2,681
      پسندیده
      925
      مورد پسند : 2,848 بار در 1,516 پست

      ساخت منوی کشویی با css

      روش ساخت منوی کشویی به روشی خیلی ساده..
      برای یادگیری این روش با ما باشید


      اول باید کد Html این منو را در قالبمون قرار بدهیم :
      کد:
      
       
      <ul> <li><a href="#">خانه</a></li> <li><a href="#">درباره ما</a> <ul> <li><a href="#">درباره ی ما</a></li> <li><a href="#">تاریخچه</a></li> <li><a href="#">پروژه ها</a></li> </ul> </li> <li><a href="#">آموزش</a> <ul> <li><a href="#">CSS</a></li> <li><a href="#">HTML</a></li> <li><a href="#">jquery</a></li> <li><a href="#">Software</a></li> </ul> </li> <li><a href="#">تماس با ما</a> <ul> <li><a href="#">تماس آنلاین</a></li> <li><a href="#">آدرس!</a></li> </ul> </li> </ul></code></div> </div>
      2. حال باید کد های Css زیر را در فایل Style قرار دهید :
      کد:
      
      
       
      <ul { font-family: Arial, Verdana; font-size: 14px; margin: 0; padding: 0; list-style: none; } ul li { display: block; position: relative; float: right; } li ul { float:right; display: none; } ul li a { display: block; text-decoration: none; color: #ffffff; border-top: 1px solid #ffffff; padding: 5px 15px 5px 15px; background: #1e7c9a; margin-left: 1px; white-space: nowrap; } ul li a:hover { background: #3b3b3b; } li:hover ul { display: block; position: absolute; } li:hover li { float: none; font-size: 11px; } li:hover a { background: #3b3b3b; } li:hover li a:hover { background: #1e7c9a; }
      به همین راحتی ! امیدوارم که از این آموزش راضی باشید .

    2. کاربر مقابل پست Mr. Reza عزیز را پسندیده است:

      Mehrzad (06-09-2014)

    3. #2

      http://www.graphiran.com/wp-content/uploads/2013/01/1.pnghttp://www.graphiran.com/wp-content/uploads/2013/01/2.pnghttp://www.graphiran.com/wp-content/uploads/2013/01/2.pnghttp://www.graphiran.com/wp-content/uploads/2013/01/2.pnghttp://www.graphiran.com/wp-content/uploads/2013/01/2.png
      کاربر
      تاریخ عضویت
      Jun 2014
      عنوان کاربر
      کاربر
      شماره عضویت
      9820
      نوشته ها
      6
      پسندیده
      1
      مورد پسند : 6 بار در 4 پست
      از این راحت ترم میشه
      داخل قسمت استایل
      کد HTML:
      <style type="text/css">
      #A { height:100px; width:100px;}
      #b { height:25px; width:200px;}
      ul {height:25px}
       </style>
      اون جاییکه میخواید منو باشه
      کد HTML:
      <div style=" height:30px; width:100px; ">
      <ul style="overflow:hidden;" onmouseover="id='A'" onmouseout="id='b'">منوی اصلی 
      <li><a href="">منوی جانبی</a></li>
      <li><a href="">منوی جانبی</a></li>
      <li><a href="">منوی جانبی</a></li>
      </ul>
      </div>
      فقط یه مشکلی داره وقتی بازو بسته میشه منو بقیه تکون میخورن
      برای اونام margin-top در نظر گرفته شه مشکل حل میشه

      مثل ↓



      کد HTML:
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title>Untitled Document</title>
      <style type="text/css">
      #A { height:100px; width:100px;}
      #b { height:25px; width:200px;}
      ul {height:25px}
       </style>
      </head>
      
      <body>
      <div style=" height:30px; width:100px; ">
      <ul style="overflow:hidden;" onmouseover="id='A'" onmouseout="id='b'">منوی اصلی 
      <li><a href="">منوی جانبی</a></li>
      <li><a href="">منوی جانبی</a></li>
      <li><a href="">منوی جانبی</a></li>
      </ul>
      </div>
      <div style="background-color:red; height:30px; width:100px; margin-top:50px"></div>
      </body>
      </html>
      ویرایش توسط erfan16 : 06-06-2014 در ساعت 02:42 PM

    4. کاربر مقابل پست erfan16 عزیز را پسندیده است:

      Mehrzad (06-09-2014)

    5. #3

      http://www.graphiran.com/wp-content/uploads/2013/01/1.pnghttp://www.graphiran.com/wp-content/uploads/2013/01/2.pnghttp://www.graphiran.com/wp-content/uploads/2013/01/2.pnghttp://www.graphiran.com/wp-content/uploads/2013/01/2.pnghttp://www.graphiran.com/wp-content/uploads/2013/01/2.png
      کاربر
      تاریخ عضویت
      Jan 2018
      عنوان کاربر
      کاربر
      شماره عضویت
      21366
      نوشته ها
      32
      پسندیده
      3
      مورد پسند : 0 بار در 0 پست
      متغیرها در Css در برخی از ورژن های مرورگرهای مختلف هنوز قابل شناسایی نیست. به w3school مراجعه کنید.
      [تنها کاربران عضو شده می توانند لینک ها را مشاهده کنند ] |[تنها کاربران عضو شده می توانند لینک ها را مشاهده کنند ] |[تنها کاربران عضو شده می توانند لینک ها را مشاهده کنند ] |[تنها کاربران عضو شده می توانند لینک ها را مشاهده کنند ]| [تنها کاربران عضو شده می توانند لینک ها را مشاهده کنند ]

    اطلاعات موضوع

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

    در حال حاضر 1 کاربر در حال مشاهده این موضوع است. (0 کاربران و 1 مهمان ها)

    موضوعات مشابه

    1. ترول - عزیزم چند کیلویی
      توسط weatherforecaster در انجمن عکس های ترول
      پاسخ: 0
      آخرين نوشته: 07-16-2012, 12:33 PM
    2. هوش هیجانی در روابط زناشویی
      توسط Nafas در انجمن نکته های همسرداری
      پاسخ: 1
      آخرين نوشته: 06-24-2012, 01:14 AM
    3. 16 نکته کاربردی در حل بحران های زناشویی
      توسط Nafas در انجمن نکته های همسرداری
      پاسخ: 1
      آخرين نوشته: 06-23-2012, 12:12 PM
    4. خودرویی از جنس بامبو+عکس
      توسط weatherforecaster در انجمن متفرقه
      پاسخ: 0
      آخرين نوشته: 06-07-2012, 03:30 PM
    5. تصاویر نانویی از کوچکترین جانداران زنده روی زمین
      توسط Nafas در انجمن عکس های گوناگون
      پاسخ: 0
      آخرين نوشته: 05-28-2012, 04:16 PM

    کلمات کلیدی این موضوع

    مجوز های ارسال و ویرایش

    • شما نمیتوانید موضوع جدیدی ارسال کنید
    • شما امکان ارسال پاسخ را ندارید
    • شما نمیتوانید فایل پیوست کنید.
    • شما نمیتوانید پست های خود را ویرایش کنید
    •  

    درباره گرافیران

    سایت گرافیران به منظور ارائه بهترین ابزار گرافیکی در وب در تاریخ ۴ خرداد ۱۳۸۹ ساخته شد. از آن زمان تا کنون سعی ما بر این بوده تا بهترین نمونه های آماده ، ابزار گرافیکی و آموزش های فتوشاپ را برای کاربران فراهم کنیم . گرافیران توسط هاست دی ال هاست می شود.

    اطلاعات

    طراحی شده توسط : FoX FuN

    تعرفه تبلیغات : مشاهده تعرفه ها

    ایمیل مدیریت سایت : info@graphiran.com

    لینک ها