راهنمایی برای dropdown منو

unid_user · شهریور 96

سلام دوستان :wub:

من میخوام یه منوی آبشاری درست کنم اما برای استایل دادن (انیمیشن) به کلاس 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 · شهریور 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); }

این قسمت و مطمئنم اشتباه نوشتم اما کجاش اشتباهه نمیدونم.

محمد پارسا · شهریور 96

سلام

چرا از افزونه های طراحی شده استفاده نمیکنی؟

محمدرضـا · شهریور 96

دقیقا متوجه منظورتان نشدم !

اما برای استایل دادن به اولین تگ / استایل میتونید از first-child استفاده کنید که آموزش اون در لینک زیر موجود هست :

https://www.w3schools.com/cssref/sel_firstchild.asp

اگر هم هر تگ شما کلاس جدا دارند ، میتونید مثل مثال زیر کد بزنید .

.menu-1 {
	your style;
}

ErfanMola · شهریور 96

در 17 ساعت قبل، masoudch گفته است :

سلام دوستان :wub:

من میخوام یه منوی آبشاری درست کنم اما برای استایل دادن (انیمیشن) به کلاس 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);
}

با سلام

بنظرم بهتره اول انیمیشن مورد نظر تون رو بیان کنید تا استایل طبق نیاز تون اصلاح بشه

محمد پارسا · شهریور 96

در هم اکنون، محمدرضـا گفته است :
دقیقا متوجه منظورتان نشدم !

اما برای استایل دادن به اولین تگ / استایل میتونید از first-child استفاده کنید که آموزش اون در لینک زیر موجود هست :

https://www.w3schools.com/cssref/sel_firstchild.asp

اگر هم هر تگ شما کلاس جدا دارند ، میتونید مثل مثال زیر کد بزنید .
.menu-1 {
	your style;
}

از افزونه Mega Menu استفاده کن

اگر نمیخوای یه سری نمونه هست بهت معرفی میکنم

unid_user · شهریور 96

در هم اکنون، ErfanMola گفته است :

با سلام

بنظرم بهتره اول انیمیشن مورد نظر تون رو بیان کنید تا استایل طبق نیاز تون اصلاح بشه

سلام

میخوام وقتی موس میره روی منوهای اصلی ، زیر منوها که میخوان بیفتن به صورت آروم از بالا به پایین بیفتن و هر li به چرخه. توی ویدئو آموزش داده ولی حجمش حدود 1 گیگه وگرنه میتونستم آپلودش کنم.

ولی چون از codepen به صورت آنلاین برای کد نویسی استفاده میکنه اصلا خیلی عجیب کدها رو میزنه و تا همینجاش هم بزور تونستم بفهمم چیکار داره میکنه.

ممنون

محمد پارسا · شهریور 96

خوب میریم سراغ نمونه ها

اول سایت مرجع اینه: https://codepen.io

نمونه آبشاری:

نمونه های دیگه :

unid_user · شهریور 96

در 4 دقیقه قبل، محمدرضـا گفته است :
دقیقا متوجه منظورتان نشدم !

اما برای استایل دادن به اولین تگ / استایل میتونید از first-child استفاده کنید که آموزش اون در لینک زیر موجود هست :

https://www.w3schools.com/cssref/sel_firstchild.asp

اگر هم هر تگ شما کلاس جدا دارند ، میتونید مثل مثال زیر کد بزنید .
.menu-1 {
	your style;
}

میخوام وقتی منوها پایین میفتن با انیمیشن باشه. مثلا بچرخند و پایین بیفتن.

محمد پارسا · شهریور 96

در هم اکنون، masoudch گفته است :

سلام

میخوام وقتی موس میره روی منوهای اصلی ، زیر منوها که میخوان بیفتن به صورت آروم از بالا به پایین بیفتن و هر li به چرخه. توی ویدئو آموزش داده ولی حجمش حدود 1 گیگه وگرنه میتونستم آپلودش کنم.

ولی چون از codepen به صورت آنلاین برای کد نویسی استفاده میکنه اصلا خیلی عجیب کدها رو میزنه و تا همینجاش هم بزور تونستم بفهمم چیکار داره میکنه.

ممنون

کود پن که خیلی نمونه داره میتونی از نمونه های دیگه استفاده کنید ، سه رچ کوچیک بزن واقعا نمونه های جالبی داره

unid_user · شهریور 96

در 4 دقیقه قبل، محمد پارسا گفته است :

از افزونه Mega Menu استفاده کن

اگر نمیخوای یه سری نمونه هست بهت معرفی میکنم

نه افزونه نمیخوام. اگه بشه لطفا کد معرفی کنید.

محمد پارسا · شهریور 96

در هم اکنون، masoudch گفته است :

نه افزونه نمیخوام. اگه بشه لطفا کد معرفی کنید.

سایت CodePen رو بررسی کن ، با عنوان slider menu

ErfanMola · شهریور 96

در 7 دقیقه قبل، masoudch گفته است :

سلام

میخوام وقتی موس میره روی منوهای اصلی ، زیر منوها که میخوان بیفتن به صورت آروم از بالا به پایین بیفتن و هر li به چرخه. توی ویدئو آموزش داده ولی حجمش حدود 1 گیگه وگرنه میتونستم آپلودش کنم.

ولی چون از codepen به صورت آنلاین برای کد نویسی استفاده میکنه اصلا خیلی عجیب کدها رو میزنه و تا همینجاش هم بزور تونستم بفهمم چیکار داره میکنه.

ممنون

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

unid_user · شهریور 96

در هم اکنون، ErfanMola گفته است :

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

ویدئوش خیلی حجم داره 1 گیگ و خورده ایه. نمیتونم ویدئو بزارم ولی میتنو از صفحه دسکتاپم فیلم بگیرم.

ErfanMola · شهریور 96

در هم اکنون، masoudch گفته است :

ویدئوش خیلی حجم داره 1 گیگ و خورده ایه. نمیتونم ویدئو بزارم ولی میتنو از صفحه دسکتاپم فیلم بگیرم.

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

unid_user · شهریور 96

در 5 دقیقه قبل، ErfanMola گفته است :

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

لطفا ویدئو رو تا پایان نگاه کنید. حجم ویدئو حدود 1 مگ

css.mp4

unid_user · شهریور 96

چطور میشه تاپیک رو جمع بندی کرد و بعدم بستش یا باز باشه ولی اینقدر شلوغ نباشه؟

**sajad** · شهریور 96

دوست عزیز @masoudch سلام

میتونی از این تمپلتی که پیوست میکنم استفاده کنی.

menu-animated.html

فکر کنم همون چیزی شد که میخواید.

موفق باشید!

**sajad** · شهریور 96

در 2 ساعت قبل، masoudch گفته است :

چطور میشه تاپیک رو جمع بندی کرد و بعدم بستش یا باز باشه ولی اینقدر شلوغ نباشه؟

این مورد باید بدست ادمین یا مدیر انجمن انجام بشه.

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

Mirrajabi · شهریور 96

در 17 ساعت قبل، masoudch گفته است :

لطفا ویدئو رو تا پایان نگاه کنید. حجم ویدئو حدود 1 مگ

css.mp4

سلام . تقریبا شبیه چیزیکه که می خواید.

https://www.bootply.com/ZFpB6GNtb6

unid_user · شهریور 96

در 20 ساعت قبل، m4xs051 گفته است :

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

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

بهتره که موقع نقل قول فقط قسمتی نقل بشه که میخوایم به اون بخش از موضوع پاسخ بدیم تا اینکه بخوایم همه پرسش و نقل کنیم.

خوبه که در انتهای این تاپیک که به نتیجه هم رسید، از همه کسانی که من رو در موضوعاتی که مطرح میکنم راهنمایی میکنن و همینطور از مدیریت انجمن که این امکان رو فراهم کردن صمیمانه تشکر کنم. و همینطور سپاس گذار هستم که من رو در فراگیری مباحث طراحی سایت تا این پایه که میتونم یه وبسایت شاید بشه گفت حرفه ای رو طراحی کنم کمک و راهنمایی کردید. از همگی ممنونم. :wub: :rolleyes:

ویرایش شده شهریور 96 توسط masoudch

راهنمایی برای dropdown منو

پست های پیشنهاد شده

unid_user 63

لینک به ارسال

unid_user 63

لینک به ارسال

محمد پارسا 90

لینک به ارسال

محمدرضـا 388

لینک به ارسال

ErfanMola 31

لینک به ارسال

محمد پارسا 90

لینک به ارسال

unid_user 63

لینک به ارسال

محمد پارسا 90

لینک به ارسال

unid_user 63

لینک به ارسال

محمد پارسا 90

لینک به ارسال

unid_user 63

لینک به ارسال

محمد پارسا 90

لینک به ارسال

ErfanMola 31

لینک به ارسال

unid_user 63

لینک به ارسال

ErfanMola 31

لینک به ارسال

unid_user 63

لینک به ارسال

unid_user 63

لینک به ارسال

sajad 731

لینک به ارسال

sajad 731

لینک به ارسال

Mirrajabi 455

لینک به ارسال

unid_user 63

لینک به ارسال

لطفا برای ارسال دیدگاه وارد شوید