Question

我正在开发一个ASP.NET网站，但我的设计非常糟糕。

我想做的事情我在数据库中有很多课程，每门课程都有很多模块。我想创建一个从数据库中获取元素的导航栏，问题是每个课程都有不同的计数，其中一个可能有10个模块，当我显示它时导航栏会溢出。

如何创建我的导航栏，如幻灯片放映，但没有自动播放，我的意思是我需要创建2个带导航的按钮，以查看导航栏中溢出的元素。

抱歉英文不好:) 任何帮助将不胜感激！

提前致谢！修改：我需要这样的图片，但隐藏溢出的元素

以下是图片：http://i.stack.imgur.com/TR28S.png

Answer 1

您可以使用bxSlider js执行此操作。这些幻灯片可以轻松地包含图像，视频或HTML内容。但你有点css更新应该做到像你的屏幕截图。这个工作正常＆amp;容易

示例：

<ul class="bxslider">
     <li>Course 01</li>
     <li>Course 02</li>
    <li>Course 02</li>
</ul>
$(document).ready(function(){
$('.bxslider').bxSlider({
      auto: true,
      autoControls: true
});

查看更多http://bxslider.com/examples/auto-show-start-stop-controls

Answer 2

如果其他人找到这样的东西，我在这里解决了：

注意：我在代码中进行了一些更改以在此处运行它，因为我使用了角度，我无法从数据库等复制数据。

＆＃13;

 * {
        margin: 0px;
        padding: 0px;
    }
    button {
        border:none;
        cursor: pointer;
    }

    .navigation {
        width: 100%;
    }

    .left-arrow {
        background: #00a4e2;
        float: left;
        text-align: center;
        height:40px;
        width: 3%;
    }

    .left-arrow:hover {
        background: #69c;
    }

    .left-arrow i {
        color: #fff;
        font-size: 18px;
    }

    .right-arrow {
        display:inline;
        background: #00a4e2;
        float: right;
        text-align: center;
        width: 3%;
        height:40px;
    }

    .right-arrow:hover {
        background: #69c;
    }

    .right-arrow i {
        color: #fff;
        font-size: 18px;
    }

    .course {
        float:left;
        font-size: 0;
        overflow: hidden !important;
        width: 94%;
        white-space: nowrap;
    }

    .course li {
        border: 1px solid #69c;
        color: #fff;
        display: inline-block;
        font-size: 16px;
        height: 40px;
        list-style: none;
        text-align: center;
        margin-right:5px;
    }

    .course li a {
        color: #fff;
        display: block;
        height: 100%;
        text-decoration: none;
        width: 100%;
        padding:10px;
    }

    .course li a:hover {
        background: #69c;
    }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- Start course menu -->
<div id="navigation" class='navigation'>
  <a style="cursor:pointer" class="left-arrow"><i style="margin-top:11px" class="fa fa-chevron-left"></i></a>
  <ul class="course">
  <li id="1"  ><a  href="#" style="background-color:green">First element</a></li>
  <li id="2"><a  href="#" style="background-color:Blue">Second element</a></li>
  <li id="3"><a  href="#" style="background-color:DarkGreen">Third element</a></li>
  <li id="4"><a  href="#" style="background-color:DarkBlue">Forth element</a></li></ul>
  <a style="cursor:pointer" class="right-arrow"><i style="margin-top:11px" class="fa fa-chevron-right"></i></a>
</div>
<!-- End course menu-->
    <script>

        var leftM = 1;
        var toMove = 0;
        $('.left-arrow').on({
            click: function () {
                if (toMove < 0) {
                    leftM -= 1;
                    var el = document.getElementById(leftM);
                    var c = el.offsetWidth;
                    $("#1").animate({ marginLeft: (toMove += c + 5) + 'px' }, 500);
                }
            }
        });
        $('.right-arrow').on({
            click: function () {
                var el = document.getElementById(leftM);
                var c = el.offsetWidth;
                console.log(c);
                $("#1").animate({ marginLeft: (toMove -= (c + 5)) + 'px' }, 500);
                leftM += 1;
            }
        });
    </script>

＆＃13;

创建滚动导航栏

2 个答案: