رفتن به مطلب

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


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

سلام دوستان :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);
}

 

لینک به ارسال
در 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); }

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

لینک به ارسال

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

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

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

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

.menu-1 {
	your style;
}

 

لینک به ارسال
در 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);
}

 

با سلام

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

لینک به ارسال
در هم اکنون، محمدرضـا گفته است :

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

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

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

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


.menu-1 {
	your style;
}

 

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

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

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

با سلام

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

سلام

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

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

ممنون

لینک به ارسال

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

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

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

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

 

لینک به ارسال
در 4 دقیقه قبل، محمدرضـا گفته است :

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

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

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

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


.menu-1 {
	your style;
}

 

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

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

سلام

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

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

ممنون

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

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

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

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

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

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

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

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

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

سلام

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

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

ممنون

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

 

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

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

 

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

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

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

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

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

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

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

css.mp4

لینک به ارسال

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

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

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

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

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

 

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

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

css.mp4

 

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

https://www.bootply.com/ZFpB6GNtb6

 

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

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

 

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

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

 

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

ویرایش شده توسط masoudch
لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...