/ منو هدایت کاربری نیمه حرفه ای با css
وندا هاست
طراحی و راه اندازی وبسایت و انجمن توسط ویکی وی بی ویکی وی بی در قبال معاملات صورت گرفته با هر یک از اعضا و سفارشات طراحی خارج از این اطلاعیه هیچگونه مسئولیتی نمی پذیرد
بک لینک ها
تبلیغات شما وندا هاست
صفحه 1 از 2 12 آخرینآخرین
نمایش نتایج: از 1 به 10 از 11

مقاله: منو هدایت کاربری نیمه حرفه ای با css

    1. منو هدایت کاربری نیمه حرفه ای با css

      منو هدایت کاربری نیمه حرفه ای با css

      این منو تو مرورگرهای زیر تست شده و کار میکنه
      کد PHP:
       Firefox 3.6.8.
      •    Internet explorer 7 به بعد.•    Google Chrome 5 به بعد•    Opera 9 به بعد
      متاسفانه منومون تو IE6 کار نمیکنه .
      ما یه div کلی خواهیم داشت و یه div که منو رو نگه میداره و یه لیست نامرتب برای گزینه های منو،به این صورت
      کد PHP:
       <div id="navWrapper">
      <
      div id="navMain"><ul><li class="firstItem"><a href="#"Home</a></li><li><span> <a href="#"About </a></span></li><li><span> <a href="#"Services</a></span></li><li><span><a href="#"Products</a></span></li><li> <span><a href="#"News</a></span></li></ul></div> </div 
      همونطور که میبینین ما یه ul یا لیست نامرتب داریم که داخل دو تا div قرار گرفته،لیست اولی رو با کلاس firstItem قابل دسترسی کردیم و مابقی رو لینکهاشو داخل تگ span قرار دادیم.
      اینکه ما آیتم اول رو کلاس بهش اختصاص دادیم برا اینکه بتونیم با css بهش دسترسی داشته باشیم و اگه یه نگاه به منو بندازید تو تصویری که گذاشتم خواهید دید که آیتم اول فقط گوشه هاش گرد هستش و این یعنی اینکه باید برای این قسمتکد مخصوص نوشته شده،برا همین از خصیصه کلاس اینجا استفاده میکنیم.
      یه نکته دیگه اینکه چرا از تگ span اینجا استفاده کردیم؟
      به خاطر تسلط بیشتر روی لیستها با استفاده از css هستش.اینجا حواستون باشه ما از این تگ صرفا به عنوان وسیله ای برای دستکاری بیشتر از طریق css استفاده میکنیم و به تنهایی کاری برا ما نمیکنه.

      و اما کد css:
      کد PHP:
       ###navWrapper, #navMain ul, #navMain, #navMain ul li, #navMain ul li a {
      padding:0;margin:0;}/*Nothing special here, simply resetting the padding & margin to 0 on all elements.*/#navWrapper {height:66px;background:url(images/cssGreyProf1/ulcentre.png) repeat-x;width:960px;font-family:Tahoma, Geneva, sans-serif;}/*Set the width & height of the div. Select a font & apply our main background image to the div.*/ #navMain {height:100%;width:100%;background:url(images/cssGreyProf1/ulRight.png) no-repeat top right;}/*Set the height & width to 100%. Apply the 'ulRight' image, place it in the top right of the div & remove the repeat.The right hand side of the div should now have rounded corners.*/ #navMain ul{padding-left:2px;width:100%;height:100%;background:url(images/cssGreyProf1/ulLeft.png) no-repeat top left;list-style:none;}/*Set the height & width to 100% once again. Following the same process as before apply the background image. This time place the image in the top left hand side.The background of the menu should now be complete & both sides should have rounded corners.Set list-style to none to remove the bullet points. Add 2px of padding-left to position the list as required.*/#navMain ul li{margin-top:2px;float:left;text-shadow:black 1px 2px 5px;}/*Add a bit of margin to the top of the list items & float them to the left. We should now have a horizontal list.The text-shadow property is actually CSS3 code we will talk more about it at the bottom of this page.*/#navMain ul li a {height:42px;display:block;padding-top:20px;padding-left:20px;padding-right:20px;color:white;text-decoration:none;border-right:#2a2b2d solid 1px;}/*To ensure each button fills the menu vertically we add a height of 42px and 20px of padding to the top. This pushes the text down into the centre of the menu whilst filling the available 62px. Change display to block. This makes the whole area of the button click-able, rather than only the text. It also tells the element to fill all available width, this is very important. Add an equal amount of padding to the left and right. This gives the button some width, whilst keeping the text centred. Add the first of our two required borders to the right of each anchor element. This is the dark border.*/ .firstItem {border-right:#e0e2d2 solid 1px;}/*Add the required light border to the right of the first list item.*/.firstItem:hover {background:url(images/cssGreyProf1/ulHover.png) top right no-repeat;}/*Apply the 'ulHover' image to the top right of the first list item & remove the repeat.*/.firstItem a:hover {background:url(images/cssGreyProf1/ulHoverLeft.png) top left no-repeat;}/*Apply the 'ulHoverLeft' image to the top left of the first list item's anchor. This will overlap the 'ulHover' image to create a seemless background.*/ #navMain ul li span {display:block;border-right:#e0e2d2 solid 1px;}/*We now need to add the required light border to the rest of the buttons. To do this change the display mode to block and add the border to the span element..*/#navMain ul li span:hover{background:url(images/cssGreyProf1/ulHover.png) repeat-x;} /*Now that the span element has a display mode of block we can apply the 'ulHover' image to it. Repeat it across the horizontal axis.*/ 
      الآن منومون باید کامل شده باشه.
      به دلخواه میتونید دستکاریش کنید

      - - - Updated - - -

      مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی
      چنانچه این مطلب مورد پسند شما واقع شده بر روی کلیک کنید .

      کاربر زیر پست على را پسندیده است:


  1. #2
    AminX آنلاین نیست.
    AminX
    مدير بازنشسته
    4,703نوشته6,570مورد پسند

    تاریخ عضویت
    Mar 2013
    شماره عضویت
    984
    پسندیده است
    2,596 پست
    بلاگ
    2 پست
    میزان امتیاز
    6578
    مسئول 2 ستاره
    www.cssnevis.ir
    درود!

    اینو خودتون درست کردید؟(فکر نمیکنم!)مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

    اگر نه منبعش رو ذکر کنید!
    .....

  2. #3
    على آنلاین نیست.
    على
    کاربر اخراجي
    96نوشته30مورد پسند

    تاریخ عضویت
    Mar 2013
    شماره عضویت
    1052
    پسندیده است
    0 پست
    بلاگ
    پست
    میزان امتیاز
    40
    No Set
    ببخشيد من كلاس رفتم طراحى كرفافيكى خلاصه كامبيوتر دركل عزيز

  3. #4
    AminX آنلاین نیست.
    AminX
    مدير بازنشسته
    4,703نوشته6,570مورد پسند

    تاریخ عضویت
    Mar 2013
    شماره عضویت
    984
    پسندیده است
    2,596 پست
    بلاگ
    2 پست
    میزان امتیاز
    6578
    مسئول 2 ستاره
    www.cssnevis.ir
    قصد جسارت نداشتم فقط خواستم بدونم!مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

    موفق باشید!مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی
    .....

  4. #5
    على آنلاین نیست.
    على
    کاربر اخراجي
    96نوشته30مورد پسند

    تاریخ عضویت
    Mar 2013
    شماره عضویت
    1052
    پسندیده است
    0 پست
    بلاگ
    پست
    میزان امتیاز
    40
    No Set
    خلاصه برنامه اى خواستين درخدمتم

  5. #6
    CodeSaz آنلاین نیست.
    CodeSaz
    مدير بخش
    3,403نوشته6,851مورد پسند

    تاریخ عضویت
    Nov 2012
    شماره عضویت
    54
    پسندیده است
    3,264 پست
    بلاگ
    0 پست
    میزان امتیاز
    6858
    مسئول 3 ستاره
    wikivb.ir
    درود.
    واقعا عالیه ! حرف نداره ! فقط اینجا ازتون کپی کردن :
    http://weebtutorials.com/cssGreyNav1.php
    به امید موفقیت های بیشتر ...
    مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

    4 نفر از اعضا پست CodeSaz را پسندیده اند



  6. #7
    على آنلاین نیست.
    على
    کاربر اخراجي
    96نوشته30مورد پسند

    تاریخ عضویت
    Mar 2013
    شماره عضویت
    1052
    پسندیده است
    0 پست
    بلاگ
    پست
    میزان امتیاز
    40
    No Set
    بزا حال كنن كد هايى كه ميسازم اختصاصى نيستن بزار كبى كنن بردارن

    - - - Updated - - -

    بست رو ببندين لطفا

  7. #8
    AminX آنلاین نیست.
    AminX
    مدير بازنشسته
    4,703نوشته6,570مورد پسند

    تاریخ عضویت
    Mar 2013
    شماره عضویت
    984
    پسندیده است
    2,596 پست
    بلاگ
    2 پست
    میزان امتیاز
    6578
    مسئول 2 ستاره
    www.cssnevis.ir
    نقل قول نوشته اصلی توسط على نمایش پست ها
    بزا حال كنن كد هايى كه ميسازم اختصاصى نيستن بزار كبى كنن بردارن

    - - - Updated - - -

    بست رو ببندين لطفا
    یعنی شما حرف محمد جان رو متوجه نشدید؟مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

    ایشون منظورشون بود دیگه از جایی کپی برداری نکنید و به نام خودتون اختصاصی بگید!

    - - - Updated - - -

    نقل قول نوشته اصلی توسط على نمایش پست ها
    بزا حال كنن كد هايى كه ميسازم اختصاصى نيستن بزار كبى كنن بردارن

    - - - Updated - - -

    بست رو ببندين لطفا
    یعنی شما حرف محمد جان رو متوجه نشدید؟مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

    ایشون منظورشون بود دیگه از جایی کپی برداری نکنید و به نام خودتون اختصاصی بگید!

    3 نفر از اعضا پست AminX را پسندیده اند


    .....

  8. #9
    Apex آنلاین نیست.
    Apex 1,246نوشته1,734مورد پسند

    تاریخ عضویت
    Dec 2012
    شماره عضویت
    199
    پسندیده است
    3,180 پست
    بلاگ
    0 پست
    میزان امتیاز
    1744
    www.gorbe-sag.ir
    راست میگه داداش..
    این سایت خارجیه..چرا بیاد کاره تورو کپی کنه..مگه بیکاره...مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی
    خلاصه کپی عاقبت نداره...نه پیشرفت داره و نه پول و کسب و درآمد..البته این رو باید در طراحی وب بدونی:
    که برای علاقه ای که داری کار میکنی مث تفریح کردن...برای پول درآوردن نباید طراح بشی...مث غرور میمونه همیشه ک نابودت میکنه آخرمرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

  9. #10
    على آنلاین نیست.
    على
    کاربر اخراجي
    96نوشته30مورد پسند

    تاریخ عضویت
    Mar 2013
    شماره عضویت
    1052
    پسندیده است
    0 پست
    بلاگ
    پست
    میزان امتیاز
    40
    No Set
    اما اي كد رو من نوشتم و از جايى كبى نكردم

صفحه 1 از 2 12 آخرینآخرین

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

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

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

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

مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی مجوز های ارسال و ویرایش

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