• اطلاعیه ها

    • Saeed Fard

      برگزاری چهارمین همایش Coder Conf و کد تخفیف برای کاربران وردپرس پارسی   20/04/97

      کدرکانف هر سال در آخرین پنجشنبه مرداد با بورد‌های مختلفی برگزار می‌گردد،امسال نیز کدرکانف در همین تاریخ با حضور برنامه نویسان مطرح کشور در بورد تخصصی جاوااسکریپت برگزار خواهد شد، یک گردهمایی متفاوت با طعم Javascript. Coderconf هر سال نسبت به سال‌های گذشته با حضور برنامه‌نویسان پر رنگتر می‌شود. ما سعی کردیم هر ساله به این کنفرانس مفهوم عمیق تری ببخشیم تا از آنچه در سال‌های گذشته عرضه شده به روزتر و مفیدتر واقع شویم. امسال فرصتی خواهد بود تا با نگرشی جدید و بهبود مطالب ارائه شده، عمیقتر به این موضوع نگاه کنیم تا بجای تکرار مباحث پیشین گامی هر چند کوچک در مسیر ارتقای دانش فنی برنامه‌نویسان ایرانی برداریم. ما در Coderconf ۴ با تمرکز بر روی Javascript نیت کرده‌ایم این فرصت را در اختیار برنامه نویسان قرار دهیم تا با ظرافت و استانداردهای روز دنیا کار خود را پیش ببرند. به نظر ما امسال زمان آن فرا رسیده‌است تا این زبان را به صورت تخصصی و از ابعاد مختلف به چالش بکشیم.   دبیر علمی همایش میلاد حیدری، کدرکانف ۴ را اینگونه توصیف کرده است :اشتراک گذاری دانش بهترین راه رسیدن به جاودانگی اطلاعات است. هر ساله همایش‌های زیادی برگزار میشه که افراد شرکت‌کننده می‌توانند با افراد مجرب شبکه سازی کنند. امسال در کدرکانف سعی کردیم علاوه بر بخش شبکه سازی بین افراد بیشتر روی انتقال دانش و کیفیت ارائه ها تمرکز داشته باشیم . به قصد یک گردهمایی بلند مدت بین برنامه‌نویسان جاوااسکریپت که با هم تبادل دانش و اطلاعات کنند گردهم آییم.
      بنده به عنوان عضو کوچکی از جامعه برنامه‌نویسان جاوااسکریپت ایران امیدوارم در کدرکانف امسال علاوه بر شبکه سازی، از اطلاعاتی که دوستان در این همایش در اختیارتان قرار می‌دهند استفاده کنید. در سایت همایش میتوانید سخنرانان و موضوع پنل همایش کدرکانف رو مشاهده کنید . علاقه‌مندان به حضور در این همایش می‌توانند با کد تخفیف wpparsi اقدام به ثبت نام در این گردهمایی کنند. سایت همایش :‌http://coderconf.org
      بلیط فروشی همایش :‌https://evand.com/events/coderconf4  

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

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


لینک به پست

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

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

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

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


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

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

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


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

  • مطالب مشابه

    • توسط fahim72
      سلام دوستان
      من یک لیست کشویی دارم که کدش به صورت زیر هست. میخوام مقادیر این لیست به ترتیب حروف الفبا نمایش داده بشوند. لطفا راهنمایی کنید. کد sort رو به چه شکلی و کجای این کد باید قرار بدم؟ یا اگر راه دیگه ای هست لطفا بهم بگید. خیییلی بهش نیاز دارم لطفا کمک کنید
      <?php if( isset( $dir_search_insurance ) && $dir_search_insurance === 'enable' ){?> <div class="col-sm-6 col-xs-6 doc-columnpadding"> <div class="form-group"> <div class="doc-select"> <select name="insurance" class="chosen-select"> <option value=""><?php $ esc_attr_e('Select insurance','docdirect');?></option> <?php docdirect_get_term_options('','insurance');?> </select> </div> </div> </div>  
    • توسط ashkan91
      با سلام و خسته نباشید
      عذر میخوام یه سوالی داشتم من از خیلی از بچه های طراحی وب پرسیدم متاسفانه به جواب درستی نرسیدم و هرکس یه نظری میداد که نتیحه نمیگرفتم، سوالم این هستش که بعضی از سایت ها یک منو کشویی ایجاد میکنند که شکلش با منو کشویی های عادی فرق داره درواقع انگار یک افزونه اینکار را انجام میده اسم اون افزونه رو میخواستم یا روش ایجاد چنین منویی. برای درک بهتر لینک سایتی که الان نمونه آن منو را ایجاد کرده را بهمراه اسکرینشات میفرستم خدمتتون
      منو به رنگ قرمز و در سمت چپ تصویر بالای صفحه قرار دارد. نام منو: " مبلغ جمع آوری شده برای خیریه" میباشد 
      http://goldtag.net/tehran
      پی نوشت: وقتی اشاره گر ماوس را روی منو میبریم منو کشویی باز میشود.
      اسرکین شات 
      http://s6.uplod.ir/i/00925/8d78a8qa4hka.jpg

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