farzadnoruzi

درخواست
زوم منو هنگام قرار گرفتن موس (Hovered)

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

سلام. کسی میدونه چه جوری و یا با کدوم افزونه میشه زوم روی منو رو انجام داد. یعنی وقتی موس میره روی هر گزینه منو(Hovered)  ، منو یه ذره زوم بشه

لطف میکنین اگه کمک کنین

0

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


لینک به پست

برای این کار باید استایل دهی کنید توسط hover  ، کد مربوط به منو همراه با استایل های منو رو قرار بدید

1

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


لینک به پست

ارسال شده در (ویرایش شده)

در 29 دقیقه قبل، zoban گفته است :

برای این کار باید استایل دهی کنید توسط hover  ، کد مربوط به منو همراه با استایل های منو رو قرار بدید

من با آرتیستر کار کردم. اطلاعاتم کمه. کد کجا رو میگین من کپی کنم. از هر فایلی یا هر جای دیگه

ویرایش شده در توسط farzadnoruzi
0

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


لینک به پست

رفتم کلا مطالعه کردم و Css  رو تا حدودی شناختم.

توی Style.css بخشart Hmeno Hover چه چیزی باید اضافه کنم ؟ ?

0

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


لینک به پست

با  transform تو css باید این کار رو انجام بدین.

3

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


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

با  transform تو css باید این کار رو انجام بدین.

میتونی یه نمونه کد بذاری. من تازه شروع کردم. ممنون میشم.

0

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


لینک به پست

ارسال شده در (ویرایش شده)

نمونه کد میزارم لطفا کمک کنید

ویرایش شده در توسط farzadnoruzi
اسپم شده بود
0

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


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

اینمul.art-hmenu a, ul.art-hmenu a:link, ul.art-hmenu a:visited, ul.art-hmenu a:hover
{
   outline: none;
   position: relative;
   z-index: 11;
}

ul.art-hmenu, ul.art-hmenu ul
{
   display: inline-block;
   margin: 0;
   padding: 0;
   border: 0;
   list-style-type: none;
}

ul.art-hmenu li
{
   position: relative;
   z-index: 5;
   display: inline-block;
   float: right;
   background: none;
   margin: 0;
   padding: 0;
   border: 0;
}

ul.art-hmenu li:hover
{
   z-index: 10000;
   white-space: normal;

}

ul.art-hmenu:after, ul.art-hmenu ul:after
{
   content: ".";
   height: 0;
   display: inline-block;
   visibility: hidden;
   overflow: hidden;
   clear: both;
}

ul.art-hmenu, ul.art-hmenu ul
{
   min-height: 0;
}

ul.art-hmenu
{
   display: inline-block;
   vertical-align: bottom;
}

.art-nav:before
{
   content:' ';
}

nav.art-nav
{
   border-bottom-right-radius: 0;
   border-bottom-left-radius: 0;
}

.art-hmenu-extra1
{
   position: relative;
   display: inline-block;
   float: left;
   width: auto;
   height: auto;
   background-position: center;
}

.art-hmenu-extra2
{
   position: relative;
   display: inline-block;
   float: right;
   width: auto;
   height: auto;
   background-position: center;
}

.art-menuitemcontainer
{
   margin:0 auto;
}
ul.art-hmenu>li {
   margin-right: 11px;
}
ul.art-hmenu>li:first-child {
   margin-right: 5px;
}
ul.art-hmenu>li:last-child, ul.art-hmenu>li.last-child {
   margin-left: 5px;
}

ul.art-hmenu>li>a
{
   background: #003C85;
   -webkit-border-radius:3px;
   -moz-border-radius:3px;
   border-radius:3px;
   padding:0 17px;
   margin:0 auto;
   position: relative;
   display: block;
   height: 34px;
   cursor: pointer;
   text-decoration: none;
   color: #FFFFFF;
   line-height: 34px;
   text-align: center;
}

.art-hmenu>li>a,
.art-hmenu>li>a:link,
.art-hmenu>li>a:visited,
.art-hmenu>li>a.active,
.art-hmenu>li>a:hover
{
   font-size: 13px;
   font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
   font-weight: normal;
   font-style: normal;
   text-decoration: none;
   text-transform: uppercase;
   text-align: right;
}

ul.art-hmenu>li>a.active
{
   background: #E5000F;
   -webkit-border-radius:3px;
   -moz-border-radius:3px;
   border-radius:3px;
   padding:0 17px;
   margin:0 auto;
   color: #FFFFFF;
   text-decoration: none;
}

ul.art-hmenu>li>a:visited,
ul.art-hmenu>li>a:hover,
ul.art-hmenu>li:hover>a {
   text-decoration: none;
}

ul.art-hmenu>li>a:hover, .desktop ul.art-hmenu>li:hover>a
{
   background: #FA681E;
   -webkit-border-radius:3px;
   -moz-border-radius:3px;
   border-radius:3px;
   padding:0 17px;
   margin:0 auto;
}
ul.art-hmenu>li>a:hover,
.desktop ul.art-hmenu>li:hover>a {
   color: #FFF5F0;
   text-decoration: none;
}

ul.art-hmenu>li:before
{
   position:absolute;
   display: block;
   content:' ';
   top:0;
   right:  -11px;
   width:11px;
   height: 34px;
   background: url('images/menuseparator.png') center center no-repeat;
}
ul.art-hmenu>li:first-child:before{
   display:none;
}

ul.art-hmenu li li a
{

   background: #B9C2CB;
   background: transparent;
   -webkit-border-radius:3px;
   -moz-border-radius:3px;
   border-radius:3px;
   padding:0 10px;
   margin:0 auto;
}
ul.art-hmenu li li
{
   float: none;
   width: auto;
   margin-top: 2px;
   margin-bottom: 2px;
}

.desktop ul.art-hmenu li li ul>li:first-child
{
   margin-top: 0;
}

ul.art-hmenu li li ul>li:last-child
{
   margin-bottom: 0;
}

.art-hmenu ul a
{
   display: block;
   white-space: nowrap;
   height: 24px;
   min-width: 7em;
   border: 0 solid transparent;
   text-align: right;
   line-height: 24px;
   color: #6A7D90;
   font-size: 13px;
   font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
   text-decoration: none;
   margin:0;
}

.art-hmenu ul a:link,
.art-hmenu ul a:visited,
.art-hmenu ul a.active,
.art-hmenu ul a:hover
{
   text-align: right;
   line-height: 24px;
   color: #6A7D90;
   font-size: 13px;
   font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
   text-decoration: none;
   margin:0;
}

ul.art-hmenu li li:after
{
   display: block;
   position: absolute;
   content: ' ';
   height: 0;
   top: -1px;
   left: 0;
   right: 0;
   z-index: 1;
   border-bottom: 1px dotted #C6D1DD;
}

.desktop ul.art-hmenu li li:first-child:before,
.desktop ul.art-hmenu li li:first-child:after
{
   display: none;
}

ul.art-hmenu ul li a:hover, .desktop ul.art-hmenu ul li:hover>a
{
   background: #FFFFFF;
   background: transparent;
   -webkit-border-radius:3px;
   -moz-border-radius:3px;
   border-radius:3px;
   margin:0 auto;
}
.art-hmenu ul a:hover
{
   text-decoration: none;
   color: #E14E05;
}

.desktop .art-hmenu ul li:hover>a
{
   color: #E14E05;
}

ul.art-hmenu ul:before
{
   background: #EFF2F5;
   -webkit-border-radius:3px;
   -moz-border-radius:3px;
   border-radius:3px;
   border:1px dotted rgba(207, 216, 226, 0.9);
   margin:0 auto;
   display: block;
   position: absolute;
   content: ' ';
   z-index: 1;
}
.desktop ul.art-hmenu li:hover>ul {
   visibility: visible;
   top: 100%;
}
.desktop ul.art-hmenu li li:hover>ul {
   top: 0;
   right: 100%;
}

ul.art-hmenu ul
{
   visibility: hidden;
   position: absolute;
   z-index: 10;
   right: 0;
   top: 0;
   background-image: url('images/spacer.gif');
}

.desktop ul.art-hmenu>li>ul
{
   padding: 16px 36px 36px 36px;
   margin: -10px -30px 0 0;
}

.desktop ul.art-hmenu ul ul
{
   padding: 36px 18px 36px 36px;
   margin: -36px -5px 0 0;
}

.desktop ul.art-hmenu ul.art-hmenu-left-to-right
{
   right: auto;
   left: 0;
   margin: -10px 0 0 -30px;
}

.desktop ul.art-hmenu ul.art-hmenu-right-to-left
{
   left: auto;
   right: 0;
   margin: -10px -30px 0 0;
}

.desktop ul.art-hmenu li li:hover>ul.art-hmenu-left-to-right {
   right: auto;
   left: 100%;
}
.desktop ul.art-hmenu li li:hover>ul.art-hmenu-right-to-left {
   left: auto;
   right: 100%;
}

.desktop ul.art-hmenu ul ul.art-hmenu-left-to-right
{
   right: auto;
   left: 0;
   padding: 36px 36px 36px 18px;
   margin: -36px 0 0 -5px;
}

.desktop ul.art-hmenu ul ul.art-hmenu-right-to-left
{
   left: auto;
   right: 0;
   padding: 36px 18px 36px 36px;
   margin: -36px -5px 0 0;
}

.desktop ul.art-hmenu li ul>li:first-child {
   margin-top: 0;
}
.desktop ul.art-hmenu li ul>li:last-child {
   margin-bottom: 0;
}

.desktop ul.art-hmenu ul ul:before
{
   border-radius: 3px;
   top: 30px;
   bottom: 30px;
   right: 12px;
   left: 30px;
}

.desktop ul.art-hmenu>li>ul:before
{
   top: 10px;
   right: 30px;
   bottom: 30px;
   left: 30px;
}

.desktop ul.art-hmenu>li>ul.art-hmenu-left-to-right:before {
   right: 30px;
   left: 30px;
}
.desktop ul.art-hmenu>li>ul.art-hmenu-right-to-left:before {
   right: 30px;
   left: 30px;
}
.desktop ul.art-hmenu ul ul.art-hmenu-left-to-right:before {
   right: 30px;
   left: 12px;
}
.desktop ul.art-hmenu ul ul.art-hmenu-right-to-left:before {
   right: 12px;
   left: 30px;
}

.desktop ul.art-hmenu>li.ext>a
{
   white-space: nowrap;
}

.desktop ul.art-hmenu>li.ext>a:hover,
.desktop ul.art-hmenu>li.ext:hover>a,
.desktop ul.art-hmenu>li.ext:hover>a.active  
{
   background: none;
   /* default padding + border size */
  padding: 0 17px 0 17px;
   /* margin for shadow */
  margin: -0 -0 0 -0;
   overflow: hidden;
   position: relative;
   border: none;
   border-radius: 0;
   box-shadow: none;
   color: #F05305;
}

.desktop ul.art-hmenu>li.ext>a:hover:before,
.desktop ul.art-hmenu>li.ext:hover>a:before,
.desktop ul.art-hmenu>li.ext:hover>a.active:before  
{
   position: absolute;
   content: ' ';
   /* top, right, left - for shadow */
  top: 0;
   right: 0;
   left: 0;
   /* border + shadow */
  bottom: -1px;
   background-color: #EFF2F5;
   border: 1px Dotted rgba(207, 216, 226, 0.9);
   border-top-left-radius: 3px;
   border-top-right-radius: 3px;
   box-shadow: 0 0 0 rgba(0, 0, 0, 0.8);
   z-index: -1;
}

.desktop ul.art-hmenu>li.ext:hover>ul
{
   padding-top: 5px;
   /* menu bar padding */
  margin-top: 0;
}

.desktop ul.art-hmenu>li.ext:hover>ul:before
{
   /* border + shadow */
  top: -1px;
   clip: rect(6px, auto, auto, auto);
   border-top-left-radius: 0;
   border-top-right-radius: 0;
   box-shadow: 0 0 0 rgba(0, 0, 0, 0.8);
}

ul.art-hmenu>li.ext>.ext-r,
ul.art-hmenu>li.ext>.ext-l,
ul.art-hmenu>li.ext>.ext-m,
ul.art-hmenu>li.ext>.ext-off
{
   display: none;
   z-index: 12;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}

.desktop ul.art-hmenu>li.ext>ul
{
   z-index: 13;
}

.desktop ul.art-hmenu>li.ext.ext-r:hover>.ext-r,
.desktop ul.art-hmenu>li.ext.ext-l:hover>.ext-l
{
   position: absolute;
   display: block;
   overflow: hidden;
   /* size of radius
   * if size if 0 we should now generate script
   * that adds ext-r and ext-m divs
   */
  height: 6px;
   top: 100%;
   padding-top: 1px;
   margin-top: -1px;
/* border width + shadow */}

.desktop ul.art-hmenu>li.ext:hover>.ext-r:before,
.desktop ul.art-hmenu>li.ext:hover>.ext-l:before
{
   position: absolute;
   content: ' ';
   top: 0;
   /* border + shadow */
  bottom: -1px;
   background-color: #EFF2F5;
   border: 1px Dotted rgba(207, 216, 226, 0.9);
   box-shadow: 0 0 0 rgba(0, 0, 0, 0.8);
}

.desktop ul.art-hmenu>li.ext.ext-r:hover>.ext-r
{
   left: 100%;
   right: auto;
   padding-left: 0;
   margin-left: 0;
   padding-right: 1px;
   margin-right: -1px;
/* only shadow */}

.desktop ul.art-hmenu>li.ext.ext-r:hover>.ext-r:before
{
   right: 0;
   left: -1px;
   border-top-left-radius: 0;
   border-top-right-radius: 3px;
}

.desktop ul.art-hmenu>li.ext.ext-l:hover>.ext-l
{
   right: 100%;
   left: auto;
   padding-right: 0;
   margin-right: 0;
   padding-left: 1px;
   margin-left: -1px;
/* only shadow */}

.desktop ul.art-hmenu>li.ext.ext-l:hover>.ext-l:before
{
   right: -1px;
   left: 0;
   border-top-right-radius: 0;
   border-top-left-radius: 3px;
}

.desktop ul.art-hmenu>li.ext:hover>.ext-m,
.desktop ul.art-hmenu>li.ext:hover>.ext-off
{
   position: absolute;
   display: block;
   overflow: hidden;
   height: 5px;
   top: 100%;
}

.desktop ul.art-hmenu>li.ext.ext-r:hover>.ext-m
{
   /* shadow offset */
  left: -0;
   right: 0;
   /* shadow offset */
  padding-right: 0;
   padding-left: 0;
}

.desktop ul.art-hmenu>li.ext:hover>.ext-off
{
   /* shadow offset */
  left: -0;
   right: -0;
   /* shadow offset */
  padding-left: 0;
   padding-right: 0;
}

.desktop ul.art-hmenu>li.ext.ext-l:hover>.ext-m
{
   /* shadow offset */
  right: -0;
   left: 0;
   /* shadow offset */
  padding-left: 0;
   padding-right: 0;
}

.desktop ul.art-hmenu>li.ext.ext-l.ext-r:hover>.ext-m
{
   /* shadow offset */
  right: -0;
   left: -0;
   /* shadow offset */
  padding-left: 0;
   padding-right: 0;
}

.desktop ul.art-hmenu>li.ext:hover>.ext-m:before,
.desktop ul.art-hmenu>li.ext:hover>.ext-off:before
{
   position: absolute;
   content: ' ';
   top: -1px;
   bottom: -1px;
   /* shadow offset */
  background-color: #EFF2F5;
   border: 1px Dotted rgba(207, 216, 226, 0.9);
   box-shadow: 0 0 0 rgba(0, 0, 0, 0.8);
}

.desktop ul.art-hmenu>li.ext.ext-r:hover>.ext-m:before
{
   right: -1px;
   left: 0;
}

.desktop ul.art-hmenu>li.ext.ext-l:hover>.ext-m:before
{
   left: -1px;
   right: 0;
}

.desktop ul.art-hmenu>li.ext.ext-l.ext-r:hover>.ext-m:before
{
   left: -1px;
   right: -1px
;

کد استایل منو من اینه(منو Horizantal)

0

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


لینک به پست

باید از hover استفاده کنید 

آدرس سایتتون رو بدید تا من براتون درستش کنم 

0

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


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

باید از hover استفاده کنید 

آدرس سایتتون رو بدید تا من براتون درستش کنم 

www.hofmannprofile.com

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

0

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


لینک به پست
در در ۱۳۹۴/۱۰/۱۸ ه‍.ش. at 11:44، zoban گفته است :

باید از hover استفاده کنید 

آدرس سایتتون رو بدید تا من براتون درستش کنم 

اینم فایل استایل

Style.css

0

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


لینک به پست

از اساتید کسی نیست کمک کنه ؟ کارم خیلی لنگه

0

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


لینک به پست
 box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-webkit-transition:all 0.5s ease;
-moz-transition:all 0.5s ease;
transition:all 0.5s ease;
-webkit-transform:rotate(5deg) scale(1.2);
-moz-transform:rotate(5deg) scale(1.2);
transform:rotate(5deg) scale(1.2); 

ممنون از توجه همه .... خودم کدش رو پیدا کردم اینجا میذارم تا اگه کسی لازم داشت استفاده کنه .

این کد اگه توی hover منو قرار بگیره وقتی موس میره روش در مدت 0.5 ثانیه زوم میشه (1.2x ) و 5 درجه به سمت راست کج شده و پشتش سایه میندازه.

خیلی ممنونم از توجه همه دوستان.

 

0

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


لینک به پست
در در ۱۳۹۴/۱۰/۱۷ ه‍.ش. at 11:10، Rohani گفته است :

با  transform تو css باید این کار رو انجام بدین.

 

0

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


لینک به پست

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

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

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

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


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

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

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


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

  • مطالب مشابه

    • توسط naderi
      سلام .. برای توسعه یک وب سایت با قالب Eduma وردپرس میخوایم یه سری قابلیت ها رو بهش اضافه کنیم .. از دوستان کسی هست که بتونه به ما کمک کنه؟
    • توسط Hamid_92
      سلام خسته نباشید 
      من در یک وبسایت خارجی که خدمات هاست و دامنه رایگان میداد یک هاست و دامنه رایگان ساختم و میخواستم که وردپرس رو در file manager آپلود کنم و نصبش کنم و با توجه به آموزش های داخل اینترنتی باید اون فایل وردپرس رو در فایل public_html آپلود می کردم اما به محض اینکه از داخل CPanel وارد file manager هاست شدم با تصویر زیر برخورد کردم

      و پوشه ای به نام Public_html تعریف نشده بود تا فایل وردپرس رو بارگذاری کنم ممنون میشم راهنماییم کنید
      * ضمنا در داخل فایل htdocs فایلی به نام files for your website should be uploaded here! ذخیره شده بود به صورت زیر

    • توسط helen94
      سلام دوستان. من دنبال افزونه یا ابزارکی می گردم که باهاش در صفحه اصلی سایتم یه باکسی ایجاد کنم که در اون آخرین پست های سایت رو نشون بده. به این شکل که جدیدترین پست رو به همراه تصویر شاخصش در قسمت بالا به شکل بزرگتر نشون بده و در قسمت زیرش پست های قبل تر رو نشون بده. تصویر افزونه ی موردنظرم رو ضمیمه کردم به این پست.
      قالبی هم که ازش استفاده میکنم قالب استادیار هست.
      من قبلا موارد این چنینی رو در خیلی سایت ها دیدم، اما اسم افزونه یا ابزاری که باهاش این کار رو کردن نمیدونم.
      ممنون میشم راهنماییم کنید.


    • توسط 3pd
      با سلام خدمت دوستان
      ممنون میشم راهنمایی کنید که با چه افزونه ای این امکان وجود داره که بدون ایجاد برگه برای گالری ها ، بتونیم با استفاده از تصویر شاخص چندین گالری رو مثلا در صفحه اصلی سایت نمایش بدیم؟ افزونه ای میخوام باشه که برای گالری ها بشه دسته بندی ایجاد کرد.
      من با استفاده از افزونه ی foogallery، چند گالری ایجاد کردم و طرح شبکه بندی رو هم انجام دادم. با استفاده از ویژوال کامپوزر ردیف ایجاد کردم و از المان شبکه بندی استفاده کردم، در قسمت تنظیمات شبکه بندی نمایش گالری رو انتخاب کردم اما نمیشه انتخاب کرد که کدوم گالری! و صرفا میشه انتخاب کرد که چندتا از جدیدترین ها یا قدیمی ترین ها رو نمایش بده..
    • توسط hamasehyaran
      سلام 
      روزبخیر
      من یه تازه وارد وردپرسی هستم ، حدود 9 ماهه با وردپرس مشغولم .
      کدنویسی هم در حد html و css بلدم. php نمیدونم
      الان هم دارم روی سایت برای انتشارات کتاب کار میکنم.
      یه کاری می خوام انجام بدم که مدت ها درگیرشم.
      میخوام توی صفحه محصولاتم، نویسنده کتاب به صورت لینک شده بیاد و شخص با کلیک کردن روی اون به صفحه نویسنده هدایت بشه.(مثل عکس پیوست)
      چند تا کار انجام دادم ، مثلا با taxonomy ها کار  کردم ولی بلد نبودم ازشون استفاده کنم.
       
      لطفا در این مورد رهنماییم کنید.