منوی ریسپانسیو متحرک

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

آموزش استفاده

1- ابتدا فراخوانی کتابخانه پلاگین

    <script type="text/javascript" src="jquery-1.9.1.js"></script>
    <script type="text/javascript" src="jquery-ui-1.10.3.custom.js"></script>
    <link rel="stylesheet" type="text/css" href="main.css" />
    <script type="text/javascript" src="jquery.menuSlider.js"></script>
    <script type="text/javascript" src="jquery.menuSlider.min.js"></script>

الف : کد مربوط به عکس بالا منوی اولی

<div id="slideContainer">
    <ul>
        <li>چهار</li>
        <li>سه</li>
        <li>دو</li>
        <li class="selectedMenuItem">یک</li>
    </ul>
    </div>
<script>
$("#slideContainer").menuSlider({
            thickness: "6px", borderColor: "darkblue", borderSides: "border-left",
            bgColor: "rgba(0,0,150,0.3)", tStyle: "linear"
        });
</script>

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

<div id="slideContainer2">
    <ul>
        <li>چهار</li>
        <li>سه</li>
        <li>دو</li>
        <li class="selectedMenuItem">یک</li>
    </ul>
    </div>
<script>
$("#slideContainer2").menuSlider({ thickness: "2px", speed: 0.5, tStyle: "ease-out" });
</script>

ج : کد مربوط به عکس بالا منوی سومی

<div id="slideContainer3">
    <ul>
        <li>چهار</li>
        <li>سه</li>
        <li>دو</li>
        <li class="selectedMenuItem">یک</li>
    </ul>
</div>
<script>
$("#slideContainer3").menuSlider({ thickness: null, bgColor: "rgba(0,0,150,0.2)", bgRadius: "10px", tStyle: "linear" });
</script>

د :  کد مربوط به عکس بالا منوی چهارمی

    <div id="slideContainer4">
    <ul>
        <li>چهار</li>
        <li>سه</li>
        <li>دو</li>
        <li class="selectedMenuItem">یک</li>
    </ul>
    </div>
<script>
        $("#slideContainer4").menuSlider({
            thickness: "3px", borderStyle: "dashed", borderColor: "darkgreen", borderSides: "border",
            bgRadius: "10px", tStyle: "ease-in"
        });
</script>