Mahdigp

ایجاد منوی چسبان (ثابت) با CSS3

3 پست در این موضوع قرار دارد

منوهای ثابت رو حتما دیدید؟ برای مثال دکمه گوگل پلاس در سایت میهن دانلود که در گوشه سمت راست قرار دارد و با حرکت اسکرول صفحه اون کادر هم حرکت می کند .

mihandlgplus.png

خب امروز قصد داریم آموزش ساخت این منو رو برای شما شرح دهیم .

مثل آموزش های قبلی، شما باید با CSS و HTML آشنایی داشته باشید . اینبار هم با قدرت CSS3 میخواهیم این آموزش را کامل کنیم.

ابتدا طرح اولیه را در صفحه html میریزیم.

0

به اشتراک گذاری این پست


لینک به پست

سرچ کنید لطفا

0

به اشتراک گذاری این پست


لینک به پست

سلام

سرچ کنید لطفا

این دوستمون آموزش گزاشتن.

توضیح اینجا آموزش در سایت خودشون!

دوست عزیز

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

5

به اشتراک گذاری این پست


لینک به پست
مهمان
این موضوع برای عدم ارسال قفل گردیده است.

  • مطالب مشابه

    • توسط 2raj
      سلام و عرض ادب
      جدیدا با یه مشکل روبرو شدیم و اونم عدم نمایش زیر منو ها هست.اگر در عکس دقت کنید متوجه میشید که بعد از منو خدمات مالی و حسابداری که منوی خدمات مجالس و تشریفات ،خدمات چاپ و تبلیغات،خدمات ثبت ، تاسیس و تغییر انواع شرکت و... وجود داره نمایش داده نمیشه حتی با اسکرول به پائین هم نمیتونیم اونهارو مشاهده کنیم
      حالا ممنون میشم اگر که ممکنه مشکل رو بررسی کنید و راه حلی ارائه بدید
      آدرس سایت
      سپاس

    • توسط kalantari
      فهرستی داخل سایتم ساختم
      اما زمان اجرا داخل سایت، وقتی  از روی گزینه مادر می خوام به سمت گزینه فرزند (زیر منو) حرکت کنم کلا زیر منوها ناپدید می شن و نمی تونم منو و زیر منوها رو ببینم
      ممکنه راهنماییم کنید؟
    • توسط unid_user
      سلام و درود
      دوستان گرامی یه مشکل در منوی سایت پیش اومده وقتی میرم روی منوی محصولات زیر منو چندین بار خود به خود باز و بسته میشه. کدها و ویدئو رو هم میزارم لطفا کمک کنید.
      <nav> <ul> <li> <a href="#">صفحه اصلی</a> </li> <li class="dropdown"> <a href="#">محصولات</a> <ul> <li> <a href="#">محصول یک</a> </li> <li> <a href="#">محصول دو</a> </li> <li> <a href="#">محصول سه</a> </li> <li> <a href="#">محصول چهار</a> </li> </ul> </li> <li> <a href="#">نمونه کارها</a> </li> <li> <a href="#">درباره ما</a> </li> <li> <a href="#">تماس با ما</a> </li> </ul> </nav> nav { background-color: #616161; text-align: center; border-bottom: 2px solid #333333; } nav > ul > li { display: inline-block; list-style: none; color: #fff; font-size: 12px; } nav > ul > li > a { color: #fff; display: block; padding: 10px 20px; font-size: 12px; transition: all .5s; } nav > ul > li > a:hover, li.dropdown > ul > li > a:hover { background-color: #555555; color: #deb887; } nav > ul > li > ul > li { list-style: none; text-align: right; } nav > ul > li > ul > li > a { color: #fff; } li.dropdown { position: relative; } li.dropdown > ul { position: absolute; width: 150px; background-color: #616161; right: 0px; top: 106%; border-bottom: 2px solid #333333; display: none; } li.dropdown > ul > li > a { margin: 10px auto; display: block; padding: 10px 20px; } $("li.dropdown").hover(function() { $(" > ul", this).slideDown('slow'); }, function() { $(" > ul", this).slideUp('slow'); }); با تشکر و سپاس
      Video-Sun-Dec-16-2018-22-56-36.webm
    • توسط nnmmss
      سلام
      من كاملا در وردپرس تازه كار هستم. سايتي با پوسته RealNews طراحي شده. منوهايي دارم كه داراي منو و زير منو هستند. وقتي يك نوشته را به زير منو اختصاص ميدم بعد روي منو ميروم كليه نوشته هاي زير منو را هم نشان ميدهد. مثلا من به اين صورت است
      منو1
      زيرمنو 1-1
      زير منو1-2
       
      من اگر روي زير منو 1-1 كليك كنم فقط نوشته هاي زير منو 1-1 را نشان ميده ولي وقتي روي منو1 كليك كنم تمام نوشته هاي منو1   ,    زيرمنو1-1 و زيرمنو1-2 را نشان ميدهد. چطور ميتوانم اين موضوع را تصحيح كنم كه با كليك كردن روي منو1 فقط نوشته مربوط به منو1 را نشان دهد
    • توسط unid_user
      سلام و درود
      دوستان گرامی ، یک منوی خیلی جالب در وب سایت آنیاک learninweb.com هست که می خوام مشابه اون رو طراحی کنم. اما بعد از کلی تلاش نتونستم درستش کنم. لطفا اگه کسی از دوستان میدونن راهنمایی کنید.
      با سپاس و تشکر