unid_user 63 ارسال شده در شهریور 96 گزارش بازنشر ارسال شده در شهریور 96 سلام دوستان من میخوام یه منوی آبشاری درست کنم اما برای استایل دادن (انیمیشن) به کلاس menu1 مشکل دارم. لطفا راهنمایی کنید. ممنون <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>dropdown</title> <link rel="stylesheet" href="style.css"> </head> <body> <nav> <ul> <li>Style 1 <ul class="drop-menu menu-1"> <li>yek</li> <li>do</li> <li>se</li> <li>chahar</li> <li>panj</li> <li>shesh</li> </ul> </li> <li>Style 2 <ul class="drop-menu menu-2"> <li>yek</li> <li>do</li> <li>se</li> <li>chahar</li> <li>panj</li> <li>shesh</li> </ul> </li> <li>Style 3 <ul class="drop-menu menu-3"> <li>yek</li> <li>do</li> <li>se</li> <li>chahar</li> <li>panj</li> <li>shesh</li> </ul> </li> <li>Style 4 <ul class="drop-menu menu-4"> <li>yek</li> <li>do</li> <li>se</li> <li>chahar</li> <li>panj</li> <li>shesh</li> </ul> </li> </ul> </nav> </body> </html> قسمت css: nav { padding: 50px; text-align: center; } nav ul { list-style: none; padding: 0; margin: 0; display: inline-block; background: #ddd; border-radius: 5px; } nav ul li { float: left; width: 150px; height: 65px; line-height: 65px; position: relative; text-transform: uppercase; font-size: 14px; color: rgba(0, 0, 0, 0.7); cursor: pointer; } nav ul li:hover { background: #d5d5d5; border-radius: 5px; } nav ul .drop-menu { position: absolute; top: 100%; left: 0%; width: 100%; padding: 0; } nav ul .drop-menu li { background: #666; color: rgba(255, 255, 255, 0.7); } nav ul .drop-menu li:hover { background: #606060; } nav ul .drop-menu li:last-child { border-radius: 0px 0px 5px 5px; } nav ul .drop-menu li { display: none; } nav ul li:hover >.drop-menu li { display: block; } /* ============= MENU 1 ============= */ nav ul li:hover >.drop-menu .menu-1 li { opacity: 0; animation: animation-name: menu1; animation-duration: 300ms; animation-timing-function: ease-in-out; fill-mode: forwards; } @keyframes menu1 { 0%; opacity: 0; transform: rotateY(-90deg) translateY(30px); 100%; opacity: 1; transform: rotateY(0deg) translateY(0px); } نقل قول لینک به ارسال
unid_user 63 ارسال شده در شهریور 96 مالک گزارش بازنشر ارسال شده در شهریور 96 در 17 ساعت قبل، masoudch گفته است : ============= MENU 1 ============= */ nav ul li:hover >.drop-menu .menu-1 li { opacity: 0; animation: animation-name: menu1; animation-duration: 300ms; animation-timing-function: ease-in-out; fill-mode: forwards; } @keyframes menu1 { 0%; opacity: 0; transform: rotateY(-90deg) translateY(30px); 100%; opacity: 1; transform: rotateY(0deg) translateY(0px); } این قسمت و مطمئنم اشتباه نوشتم اما کجاش اشتباهه نمیدونم. نقل قول لینک به ارسال
محمد پارسا 90 ارسال شده در شهریور 96 گزارش بازنشر ارسال شده در شهریور 96 سلام چرا از افزونه های طراحی شده استفاده نمیکنی؟ نقل قول لینک به ارسال
محمدرضـا 388 ارسال شده در شهریور 96 گزارش بازنشر ارسال شده در شهریور 96 دقیقا متوجه منظورتان نشدم ! اما برای استایل دادن به اولین تگ / استایل میتونید از first-child استفاده کنید که آموزش اون در لینک زیر موجود هست : https://www.w3schools.com/cssref/sel_firstchild.asp اگر هم هر تگ شما کلاس جدا دارند ، میتونید مثل مثال زیر کد بزنید . .menu-1 { your style; } 1 نقل قول لینک به ارسال
ErfanMola 31 ارسال شده در شهریور 96 گزارش بازنشر ارسال شده در شهریور 96 در 17 ساعت قبل، masoudch گفته است : سلام دوستان من میخوام یه منوی آبشاری درست کنم اما برای استایل دادن (انیمیشن) به کلاس menu1 مشکل دارم. لطفا راهنمایی کنید. ممنون <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>dropdown</title> <link rel="stylesheet" href="style.css"> </head> <body> <nav> <ul> <li>Style 1 <ul class="drop-menu menu-1"> <li>yek</li> <li>do</li> <li>se</li> <li>chahar</li> <li>panj</li> <li>shesh</li> </ul> </li> <li>Style 2 <ul class="drop-menu menu-2"> <li>yek</li> <li>do</li> <li>se</li> <li>chahar</li> <li>panj</li> <li>shesh</li> </ul> </li> <li>Style 3 <ul class="drop-menu menu-3"> <li>yek</li> <li>do</li> <li>se</li> <li>chahar</li> <li>panj</li> <li>shesh</li> </ul> </li> <li>Style 4 <ul class="drop-menu menu-4"> <li>yek</li> <li>do</li> <li>se</li> <li>chahar</li> <li>panj</li> <li>shesh</li> </ul> </li> </ul> </nav> </body> </html> قسمت css: nav { padding: 50px; text-align: center; } nav ul { list-style: none; padding: 0; margin: 0; display: inline-block; background: #ddd; border-radius: 5px; } nav ul li { float: left; width: 150px; height: 65px; line-height: 65px; position: relative; text-transform: uppercase; font-size: 14px; color: rgba(0, 0, 0, 0.7); cursor: pointer; } nav ul li:hover { background: #d5d5d5; border-radius: 5px; } nav ul .drop-menu { position: absolute; top: 100%; left: 0%; width: 100%; padding: 0; } nav ul .drop-menu li { background: #666; color: rgba(255, 255, 255, 0.7); } nav ul .drop-menu li:hover { background: #606060; } nav ul .drop-menu li:last-child { border-radius: 0px 0px 5px 5px; } nav ul .drop-menu li { display: none; } nav ul li:hover >.drop-menu li { display: block; } /* ============= MENU 1 ============= */ nav ul li:hover >.drop-menu .menu-1 li { opacity: 0; animation: animation-name: menu1; animation-duration: 300ms; animation-timing-function: ease-in-out; fill-mode: forwards; } @keyframes menu1 { 0%; opacity: 0; transform: rotateY(-90deg) translateY(30px); 100%; opacity: 1; transform: rotateY(0deg) translateY(0px); } با سلام بنظرم بهتره اول انیمیشن مورد نظر تون رو بیان کنید تا استایل طبق نیاز تون اصلاح بشه 1 نقل قول لینک به ارسال
محمد پارسا 90 ارسال شده در شهریور 96 گزارش بازنشر ارسال شده در شهریور 96 در هم اکنون، محمدرضـا گفته است : دقیقا متوجه منظورتان نشدم ! اما برای استایل دادن به اولین تگ / استایل میتونید از first-child استفاده کنید که آموزش اون در لینک زیر موجود هست : https://www.w3schools.com/cssref/sel_firstchild.asp اگر هم هر تگ شما کلاس جدا دارند ، میتونید مثل مثال زیر کد بزنید . .menu-1 { your style; } از افزونه Mega Menu استفاده کن اگر نمیخوای یه سری نمونه هست بهت معرفی میکنم 1 نقل قول لینک به ارسال
unid_user 63 ارسال شده در شهریور 96 مالک گزارش بازنشر ارسال شده در شهریور 96 در هم اکنون، ErfanMola گفته است : با سلام بنظرم بهتره اول انیمیشن مورد نظر تون رو بیان کنید تا استایل طبق نیاز تون اصلاح بشه سلام میخوام وقتی موس میره روی منوهای اصلی ، زیر منوها که میخوان بیفتن به صورت آروم از بالا به پایین بیفتن و هر li به چرخه. توی ویدئو آموزش داده ولی حجمش حدود 1 گیگه وگرنه میتونستم آپلودش کنم. ولی چون از codepen به صورت آنلاین برای کد نویسی استفاده میکنه اصلا خیلی عجیب کدها رو میزنه و تا همینجاش هم بزور تونستم بفهمم چیکار داره میکنه. ممنون نقل قول لینک به ارسال
محمد پارسا 90 ارسال شده در شهریور 96 گزارش بازنشر ارسال شده در شهریور 96 خوب میریم سراغ نمونه ها اول سایت مرجع اینه: https://codepen.io نمونه آبشاری: نمونه های دیگه : نقل قول لینک به ارسال
unid_user 63 ارسال شده در شهریور 96 مالک گزارش بازنشر ارسال شده در شهریور 96 در 4 دقیقه قبل، محمدرضـا گفته است : دقیقا متوجه منظورتان نشدم ! اما برای استایل دادن به اولین تگ / استایل میتونید از first-child استفاده کنید که آموزش اون در لینک زیر موجود هست : https://www.w3schools.com/cssref/sel_firstchild.asp اگر هم هر تگ شما کلاس جدا دارند ، میتونید مثل مثال زیر کد بزنید . .menu-1 { your style; } میخوام وقتی منوها پایین میفتن با انیمیشن باشه. مثلا بچرخند و پایین بیفتن. نقل قول لینک به ارسال
محمد پارسا 90 ارسال شده در شهریور 96 گزارش بازنشر ارسال شده در شهریور 96 در هم اکنون، masoudch گفته است : سلام میخوام وقتی موس میره روی منوهای اصلی ، زیر منوها که میخوان بیفتن به صورت آروم از بالا به پایین بیفتن و هر li به چرخه. توی ویدئو آموزش داده ولی حجمش حدود 1 گیگه وگرنه میتونستم آپلودش کنم. ولی چون از codepen به صورت آنلاین برای کد نویسی استفاده میکنه اصلا خیلی عجیب کدها رو میزنه و تا همینجاش هم بزور تونستم بفهمم چیکار داره میکنه. ممنون کود پن که خیلی نمونه داره میتونی از نمونه های دیگه استفاده کنید ، سه رچ کوچیک بزن واقعا نمونه های جالبی داره 1 نقل قول لینک به ارسال
unid_user 63 ارسال شده در شهریور 96 مالک گزارش بازنشر ارسال شده در شهریور 96 در 4 دقیقه قبل، محمد پارسا گفته است : از افزونه Mega Menu استفاده کن اگر نمیخوای یه سری نمونه هست بهت معرفی میکنم نه افزونه نمیخوام. اگه بشه لطفا کد معرفی کنید. نقل قول لینک به ارسال
محمد پارسا 90 ارسال شده در شهریور 96 گزارش بازنشر ارسال شده در شهریور 96 در هم اکنون، masoudch گفته است : نه افزونه نمیخوام. اگه بشه لطفا کد معرفی کنید. سایت CodePen رو بررسی کن ، با عنوان slider menu 1 نقل قول لینک به ارسال
ErfanMola 31 ارسال شده در شهریور 96 گزارش بازنشر ارسال شده در شهریور 96 در 7 دقیقه قبل، masoudch گفته است : سلام میخوام وقتی موس میره روی منوهای اصلی ، زیر منوها که میخوان بیفتن به صورت آروم از بالا به پایین بیفتن و هر li به چرخه. توی ویدئو آموزش داده ولی حجمش حدود 1 گیگه وگرنه میتونستم آپلودش کنم. ولی چون از codepen به صورت آنلاین برای کد نویسی استفاده میکنه اصلا خیلی عجیب کدها رو میزنه و تا همینجاش هم بزور تونستم بفهمم چیکار داره میکنه. ممنون کاش یه ویدیو یا عکس یا گیف بدید چون چرخش میتونه در شکل های مختلفی باشه نقل قول لینک به ارسال
unid_user 63 ارسال شده در شهریور 96 مالک گزارش بازنشر ارسال شده در شهریور 96 در هم اکنون، ErfanMola گفته است : کاش یه ویدیو یا عکس یا گیف بدید چون چرخش میتونه در شکل های مختلفی باشه ویدئوش خیلی حجم داره 1 گیگ و خورده ایه. نمیتونم ویدئو بزارم ولی میتنو از صفحه دسکتاپم فیلم بگیرم. نقل قول لینک به ارسال
ErfanMola 31 ارسال شده در شهریور 96 گزارش بازنشر ارسال شده در شهریور 96 در هم اکنون، masoudch گفته است : ویدئوش خیلی حجم داره 1 گیگ و خورده ایه. نمیتونم ویدئو بزارم ولی میتنو از صفحه دسکتاپم فیلم بگیرم. اگه بتونید اون قسمت رو کراپ کنید و نشون بدید خیلی خوب میشه نقل قول لینک به ارسال
unid_user 63 ارسال شده در شهریور 96 مالک گزارش بازنشر ارسال شده در شهریور 96 در 5 دقیقه قبل، ErfanMola گفته است : اگه بتونید اون قسمت رو کراپ کنید و نشون بدید خیلی خوب میشه لطفا ویدئو رو تا پایان نگاه کنید. حجم ویدئو حدود 1 مگ css.mp4 نقل قول لینک به ارسال
unid_user 63 ارسال شده در شهریور 96 مالک گزارش بازنشر ارسال شده در شهریور 96 چطور میشه تاپیک رو جمع بندی کرد و بعدم بستش یا باز باشه ولی اینقدر شلوغ نباشه؟ نقل قول لینک به ارسال
sajad 731 ارسال شده در شهریور 96 گزارش بازنشر ارسال شده در شهریور 96 دوست عزیز @masoudch سلام میتونی از این تمپلتی که پیوست میکنم استفاده کنی. menu-animated.html فکر کنم همون چیزی شد که میخواید. موفق باشید! 2 نقل قول لینک به ارسال
sajad 731 ارسال شده در شهریور 96 گزارش بازنشر ارسال شده در شهریور 96 در 2 ساعت قبل، masoudch گفته است : چطور میشه تاپیک رو جمع بندی کرد و بعدم بستش یا باز باشه ولی اینقدر شلوغ نباشه؟ این مورد باید بدست ادمین یا مدیر انجمن انجام بشه. البته دوستان باید همیشه بیاد داشته باشن که پیام های اسپم و پیام هایی که کمکی به موضوع مطرح شده نمیکنه رو ارسال نکنن تا این مشکلات ایجاد نشه. نقل قول لینک به ارسال
Mirrajabi 455 ارسال شده در شهریور 96 گزارش بازنشر ارسال شده در شهریور 96 در 17 ساعت قبل، masoudch گفته است : لطفا ویدئو رو تا پایان نگاه کنید. حجم ویدئو حدود 1 مگ css.mp4 سلام . تقریبا شبیه چیزیکه که می خواید. https://www.bootply.com/ZFpB6GNtb6 2 نقل قول لینک به ارسال
unid_user 63 ارسال شده در شهریور 96 مالک گزارش بازنشر ارسال شده در شهریور 96 (ویرایش شده) در 20 ساعت قبل، m4xs051 گفته است : البته دوستان باید همیشه بیاد داشته باشن که پیام های اسپم و پیام هایی که کمکی به موضوع مطرح شده نمیکنه رو ارسال نکنن تا این مشکلات ایجاد نشه. بیشتر از این مورد نقل قول ها هستند که یه جورایی صفحه رو شلوغ میکنه البته من خودم هم همین مشکل و دارم. بهتره که موقع نقل قول فقط قسمتی نقل بشه که میخوایم به اون بخش از موضوع پاسخ بدیم تا اینکه بخوایم همه پرسش و نقل کنیم. خوبه که در انتهای این تاپیک که به نتیجه هم رسید، از همه کسانی که من رو در موضوعاتی که مطرح میکنم راهنمایی میکنن و همینطور از مدیریت انجمن که این امکان رو فراهم کردن صمیمانه تشکر کنم. و همینطور سپاس گذار هستم که من رو در فراگیری مباحث طراحی سایت تا این پایه که میتونم یه وبسایت شاید بشه گفت حرفه ای رو طراحی کنم کمک و راهنمایی کردید. از همگی ممنونم. ویرایش شده شهریور 96 توسط masoudch 1 نقل قول لینک به ارسال
پست های پیشنهاد شده
به گفتگو بپیوندید
هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .