رفتن به مطلب

ساخت منو این شکلی


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

تو این سایت ساده زیر اسلاید شو یه منو هست که چهار قسمت داره دعا -احکام -کلام معصوم- کلام وحی که با کلیک رو هر کودوم باز می شه و با اسکرول هم.

چطور می شه ساختش؟

لینک به ارسال

سلام

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


<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<script type="text/javascript" src="http://iaali.ir/js/jquery-1.7.2.js"></script>
<script type="text/javascript" src="http://iaali.ir/lib/jquery.ad-gallery.js"></script>
<link rel="stylesheet" type="text/css" href="http://iaali.ir/css/evoslider.css" />
<link rel="stylesheet" type="text/css" href="http://iaali.ir/css/default/default.php" />
<script type="text/javascript" src="http://iaali.ir/js/jquery.evoslider.lite-1.1.0.js"></script>

<div id="mySlider" class="evoslider default" style="height:200px;width:500px;background-color:transparent;border-width:0px;direction:rtl">

<dl style="background-color:transparent;border-width:0px">

<dt style="background-color:transparent;text-align:center">منوی 1</dt>
<dd style="background-color:#c7d0fb;text-align:justify;padding-right:100px;vertical-align:middle" >
<div class="font" style="width:97%">
<p style="text-align: justify;">
 </p>
<p dir="RTL" style="text-align: center;">
<span style="color:#000000;"><strong><span style="font-family:arial,helvetica,sans-serif;"><span style="font-size:20px;">محتوای منوی 1</span></span></strong></span></p>
</div>
</dd>


<dt style="background-color:transparent;text-align:center">منوی2</dt>
<dd style="background-color:#c7d0fb;text-align:justify;padding-right:100px;vertical-align:middle" >
<div class="font" style="width:97%">

<p style="text-align: center;">
<span style="color:#8b4513;"><span style="font-size:16px;"><strong>محتوای منوی2</strong></span></span></p>
</div>
</dd>
<dt style="background-color:transparent;text-align:center">منوی3</dt>
<dd style="background-color:#c7d0fb;text-align:justify;padding-right:100px;vertical-align:middle" >
<div class="font" style="width:97%">
<p style="text-align: justify;">
<span style="font-size:14px;"><span style="color:#2f4f4f;"><strong>محتوای منوی3</strong></span></span></p>
</div>
</dd>

<dt style="background-color:transparent;text-align:center" >منوی4</dt>
<dd style="background-color:#c7d0fb;text-align:justify;padding-right:100px;vertical-align:middle" >
<div class="font" style="width:97%">
<p style="text-align: justify;">
 </p>
<p dir="RTL" style="text-align: justify;">
<span style="color:#000080;"><span style="font-size:16px;"><strong>محتوای منوی4 </strong></span></span></p>
</div>
</dd>


</dl>
</div>
<script type="text/javascript">

$("#mySlider").evoSlider({
mode: "accordion", // Sets slider mode ("accordion", "slider", or "scroller")
width: 590, // The width of slider
height: 190, // The height of slider
slideSpace: 5, // The space between slides

mouse: true, // Enables mousewheel scroll navigation
keyboard: true, // Enables keyboard navigation (left and right arrows)
speed: 1000, // Slide transition speed in ms. (1s = 1000ms)
easing: "swing", // Defines the easing effect mode
loop: true, // Rotate slideshow

autoplay: true, // Sets EvoSlider to play slideshow when initialized
interval: 20000, // Slideshow interval time in ms
pauseOnHover: true, // Pause slideshow if mouse over the slide
pauseonclick: true, // Stop slideshow if playing

directionNav: true, // Shows directional navigation when initialized
directionNavAutoHide: false, // Shows directional navigation on hover and hide it when mouseout

controlNav: true, // Enables control navigation
controlNavAutoHide: false // Shows control navigation on mouseover and hide it when mouseout
});

</script>

لینک به ارسال

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

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

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

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

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

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

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

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

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