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

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

 

0

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


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

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

0

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


لینک به پست

سلام

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

0

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


لینک به پست

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

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

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

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

.menu-1 {
	your style;
}

 

1

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


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

 

با سلام

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

1

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


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

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

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

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

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


.menu-1 {
	your style;
}

 

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

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

1

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


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

با سلام

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

سلام

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

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

ممنون

0

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


لینک به پست

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

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

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

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

 

0

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


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

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

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

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

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


.menu-1 {
	your style;
}

 

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

0

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


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

سلام

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

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

ممنون

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

1

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


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

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

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

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

0

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


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

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

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

1

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


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

سلام

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

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

ممنون

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

 

0

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


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

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

 

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

0

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


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

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

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

0

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


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

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

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

css.mp4

0

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


لینک به پست

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

0

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


لینک به پست

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

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

menu-animated.html

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

 

موفق باشید!

2

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


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

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

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

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

 

0

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


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

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

css.mp4

 

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

https://www.bootply.com/ZFpB6GNtb6

 

2

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


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

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

 

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

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

 

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

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

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


لینک به پست

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری

  • مطالب مشابه

    • توسط runy
      سلام
      منوی آبشاری سایت من خوب عمل نمی کنه. وقتی میرم روش منو باز میشه ولی تا موس می خواه بره روی یکی از زیر منو ها منو بسته شده
      خودتون ببینید http://nedaj.ir در بالا قسمت گالری عکس بروید منوش باز نمی مونه چرا؟