webtaweb.ir

کد css and html منو تصویری بسیار زیبا و سازگار

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

سلام دوستان

کد css

The CSS Rule[/b]

<style type="text/css">
<!--
.expand-down {
 font-family:Arial, Helvetica, sans-serif;
 line-height:normal;
 margin-top:20px;
 height:150px;
 width:500px;
 background: url(/images/demos/macosx-style-background.png) no-repeat;
 margin-bottom:30px;
}
/* reset margins and paddings */
.expand-down * {
 margin: 0;
 padding: 0;
}
.expand-down ul {
 padding-top:10px;
 margin-left:10px;
}
.expand-down ul li {
 float:left;
 list-style-type:none;
}
.expand-down ul li a {
 text-decoration:none;
}
.expand-down ul li a img {
 width:50px;  /* initial width of images, 50% of width */
 height:50px; /* initial height of images, 50% of height */
 border:none;
}
/* initially, don't show the label inside <span> tag */
.expand-down ul li a span {
 display:none;
}
.expand-down ul li:hover a span {
 /* show label on mouse hover */
 display:block;
 font-size:14px;
 text-align:center;
 color:#fff;
}
/* expand the image to 100% on mouse hover.
** an image becomes active when mouse hovers it
** ideally, the image should have same width and height as below 
*/
.expand-down ul li:hover a img {
 width:100px;
 height:100px;
}
/* expand the image next to the right of the active image to 60% using + selector */
.expand-down ul li:hover + li a img {
 width:60px;
 height:60px;
}
/* expand the image second to the right of the active image to 55% using + selectors */
.expand-down ul li:hover + li + li a img {
 width:55px;
 height:55px;
}
-->

</style>


<div class="expand-down">
 <ul>
   <li>
     <a href="http://jigsaw.w3.org/css-validator/check/referer">
       <!-- the image -->
       <img src="/images/demos/w3c-valid-css-trans.png" />
       <!-- the label -->
       <span>Valid CSS</span>
     </a>
   </li>
   <!-- make copies of <li>...</li> block to create more items ... -->
 </ul>
</div>


دمو

خودم برای سایتم استفاده کردم

بسیار عالی هست واقعا css جادو می کند

از جند تا ماژول خواستم استفاده کنم که همگی قالبم بهم می ریختن

ولی این کد بسیار عالی عمل کرد

راهنمایی

ماژول ماژول mod_flexi_customcode از تو انجمن دانلود بفرمایید و نصب کنید

یه پوزیشن بهش اختصاص بدید

کد های css درون جای کدها در ماژول mod_flexi_customcode کپی بفرمایید

حالا یه ماژول از نوع html سفارشی بسازید

و کدهای html درون اون کپی کنید

و پوزیشن اونو مثل پوزیشنی که به mod_flexi_customcode دادید باشه

توضیحات تغییرات سایز تصاویر منو و .... در کدهای css موجود هست

یا علی حق نگهدار

Share this post


Link to post
Share on other sites
آموزش ووکامرس قالب جوملا قالب وردپرس قالب رایگان وردپرس قالب رایگان جوملا هاست نامحدود هاست جوملا هاست لاراول هاست وردپرس هاست ارزان هاست ربات تلگرام خرید دامنه آموزش ساخت ربات تلگرام با php آموزش لاراول آموزش cPanel آموزش php آموزش فرم ساز RSform آموزش ساخت ربات جذب ممبر آموزش ساخت ربات دوستیابی آموزش ساخت ربات فروشگاهی برای ووکامرس آموزش طراحی سایت داینامیک با php آموزش بخش پشتیبانی با rsticket

با تشکر از شما بدلیل قرار دادن این کد

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

Art CSS Dock

افزونه های مشابهش هم هست که تجاری هستند

Share this post


Link to post
Share on other sites

خواهش میکنم

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

استفاده از کد برای کسانی که با ماژول منو تصویری مشکل دارند پیشنهاد می شود

Share this post


Link to post
Share on other sites

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

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

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

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


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

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

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


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