1

Я хотела использовать готовый scrolling menu отсюда.
И кое-что под себя переделала, а вот сделать так, чтобы списки были одинаковой длины, не получается. Тут длина зависит от текста, а я хотела бы, чтобы они все были одинаковые. Помогите. :)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Scroll Menu</title>

    <script type="text/javascript" src="../js/jquery-1.3.1.min.js"></script>
    <script type="text/javascript" src="../js/jquery.easing.1.3.js"></script>
    <script type="text/javascript" src="../js/jquery.color.js"></script>
    <script type="text/javascript">

    $(document).ready(function() {

    //Background color, mouseover and mouseout
    var colorOver = '#31b8da';
    var colorOut = '#1f1f1f';

    //Padding, mouseover
    var padLeft = '20px';
    var padRight = '20px';

    //Default Padding
    var defpadLeft = $('#menu li a').css('paddingLeft');
    var defpadRight = $('#menu li a').css('paddingRight');

    //Animate the LI on mouse over, mouse out
    $('#menu li').click(function () {   
        //Make LI clickable
        window.location = $(this).find('a').attr('href');

    }).mouseover(function (){

        //mouse over LI and look for A element for transition
        $(this).find('a')
        .animate( { paddingLeft: padLeft, paddingRight: padRight}, { queue:false, duration:100 } )
        .animate( { backgroundColor: colorOver }, { queue:false, duration:200 });

    }).mouseout(function () {

        //mouse oout LI and look for A element and discard the mouse over transition
        $(this).find('a')
        .animate( { paddingLeft: defpadLeft, paddingRight: defpadRight}, { queue:false, duration:100 } )
        .animate( { backgroundColor: colorOut }, { queue:false, duration:200 });
    });

    //Scroll the menu on mouse move above the #sidebar layer
    $('#sidebar').mousemove(function(e) {

        //Sidebar Offset, Top value
        var s_top = parseInt($('#sidebar').offset().top);

        //Sidebar Offset, Bottom value
        var s_bottom = parseInt($('#sidebar').height() + s_top);

        //Roughly calculate the height of the menu by multiply height of a single LI with the total of LIs
        var mheight = parseInt($('#menu li').height() * $('#menu li').length);

        //I used this coordinate and offset values for debuggin
        $('#debugging_mouse_axis').html("X Axis : " + e.pageX + " | Y Axis " + e.pageY);
        $('#debugging_status').html(Math.round(((s_top - e.pageY)/100) * mheight / 2));

        //Calculate the top value
        //This equation is not the perfect, but it 's very close    
        var top_value = Math.round(( (s_top - e.pageY) /100) * mheight / 2);

        //Animate the #menu by chaging the top value
        $('#menu').animate({top: top_value}, { queue:false, duration:500});
    });

});

</script>

    <style>
    body {
    padding:0;
    margin:0 20px;
    }

    #sidebar {
    height:400px;
    overflow:hidden;
    position:relative;
    background-color:#eee;
    }

    #menu {
    width:100%;
    list-style:none;
    padding:0;
    margin:0;
    top:0;
    position:relative;
    height:100%;
    width:800px;
    }

    #menu li {
    padding:10px 0;
    text-align:right;
    display:block;
    cursor:hand;
    cursor:pointer;

    }

    #menu li a {
    background:url() repeat #1f1f1f;

    color:#ddd;
    font-family:helvetica, arial, verdana;
    font-size:9px;
    font-weight:900;
    display:inline;
    padding:20px 8px 5px 20px;
    text-decoration:none;
    }

    #menu li span {
    font-family:georgia, arial;
    font-size:9px;
    color:#464646;
    }

    </style>

</head>

    <h2><a href="http://www.queness.com">Scroll Menu with jQuery Tutorial</a></h2>
    <br/><br/><br/><br/><br/>

    <div id="debugging_mouse_axis"></div>
    <div id="debugging_status"></div>
    <div id="sidebar">
    <ul id="menu" style="800px">
    <li><a href="#">MENU 1 <span> / 2007</span></a></li>
    <li><a href="#">MENU SIZE 2 <span> / 2007</span></a></li>
    <li><a href="#">MENU SIZE LONG 3 <span> / 2007</span></a></li>
    <li><a href="#">MENU 4 <span> / 2007</span></a></li>
    <li><a href="#">MENU SIZE 5 <span> / 2007</span></a></li>
    <li><a href="#">MENU SIZE LONG 6 <span> / 2007</span></a></li>
    <li><a href="#">MENU 7 <span> / 2007</span></a></li>
    <li><a href="#">MENU SIZE 8 <span> / 2007</span></a></li>
    <li><a href="#">MENU SIZE LONG 9 <span> / 2007</span></a></li>
    <li><a href="#">MENU 10 <span> / 2007</span></a></li>
    <li><a href="#">MENU SIZE 11 <span> / 2007</span></a></li>
    <li><a href="#">MENU SIZE LONG 12 <span> / 2007</span></a></li>
    <li><a href="#">MENU 13 <span> / 2007</span></a></li>
    <li><a href="#">SUPER LONG MENU MENU MENU MENU SIZE 14 <span> / 2007</span></a></li>
    <li><a href="#">MENU SIZE LONG 15 <span> / 2007</span></a></li>
    <li><a href="#">MENU 16 <span> / 2007</span></a></li>
    <li><a href="#">MENU SIZE 17 <span> / 2007</span></a></li>
    <li><a href="#">MENU SIZE LONG 18 <span> / 2007</span></a></li>
    <li><a href="#">MENU 19 <span> / 2007</span></a></li>
    <li><a href="#">MENU SIZE 20 <span> / 2007</span></a></li>
    <li><a href="#">MENU SIZE LONG 21 <span> / 2007</span></a></li>
    <li><a href="#">MENU 22 <span> / 2007</span></a></li>
    <li><a href="#">MENU SIZE 5 <span> / 2007</span></a></li>
    <li><a href="#">MENU SIZE LONG 23 <span> / 2007</span></a></li>
    <li><a href="#">MENU 24 <span> / 2007</span></a></li>
    <li><a href="#">MENU SIZE 25 <span> / 2007</span></a></li>
    <li><a href="#">MENU SIZE LONG 26 <span> / 2007</span></a></li>
    <li><a href="#">MENU 27 <span> / 2007</span></a></li>
    <li><a href="#">MENU SIZE 28 <span> / 2007</span></a></li>
    <li><a href="#">MENU SIZE LONG 29 <span> / 2007</span></a></li>
    <li><a href="#">MENU 30 <span> / 2007</span></a></li>
    <li><a href="#">MENU SIZE 31 <span> / 2007</span></a></li>
    <li><a href="#">MENU SIZE LONG 32 <span> / 2007</span></a></li>
    <li><a href="#">MENU 33 <span> / 2007</span></a></li>
    <li><a href="#">MENU SIZE 34 <span> / 2007</span></a></li>
    <li><a href="#">MENU SIZE LONG 35 <span> / 2007</span></a></li>
    </ul>
    </div>
    <div style="font-size:10px;color:#ccc">Except where otherwise noted, content on this site is licensed under a Creative Commons Attribution 3.0 License.</div>

    </body>
    </html>

1 ответ 1

1

Как-то так?

#menu li {
  padding-top:1px;
}

#menu li a {
  ...
  display:block;
}
0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.