Question

有人可以指导我如何在（jQuery）的帮助下制作左侧导航菜单（左手滑块），只使用单个CSS和最小的JavaScript。

请参阅此link。

谢谢！

Answer 1

首先，不要问这样的问题。首先你必须尝试。开发人员需要先尝试。这就是开发者的形象。我们是知识寻求者。 :-D

反正！ TRY THIS。我也尝试过从自己身上学习。您必须根据需要更改某些脚本。或者您可以使用此CSS TRICKS。尽量做到最好。

这里有一些代码。

<强> HTML

<header>
        <ul id="menu" class="jpanelMenu" style="display: none;">
            <li><a class="menu" link="/">Home</a></li>
            <li><a class="menu" link="/">Gallery</a></li>
            <li><a class="menu" link="about.html">About</a></li>
            <li><a class="menu" link="/">Contact</a></li>
        </ul>
    </header>

    <div class="container-fluid" id="trigger">
        <div class="col-sm-4">
            <button type="button" class="menu-trigger btn btn-default btn-lg">
              <span class="glyphicon glyphicon-th-list"></span> Menu
            </button>
        </div>
        <div class="col-sm-4">Yeshan App</div>
        <div class="col-sm-4">Web Developer</div>
    </div>

<section id="contents">
    <p>I have another page call about.html. in that page I have contents inside the area div. Now, This functions are working fine in my localhost.</p>
    <p>Just I want to know is, when I click on the navigation menu. I want to hide the jPanelMenu as a result there website.</p>
    <a href="http://jpanelmenu.com/" target="_blank">Click Here</a>
</section>

<强> JS

$(document).ready(function () {
    var jPM = $.jPanelMenu({
        menu: '#menu',
        trigger: '.menu-trigger',
        duration: 600
    });
    jPM.on();

    $(".menu").click(function(){
        var url = $(this).attr("link");
        //alert(url);
        //$( "#contents" ).fadeIn("slow").load(url+" #contents");
        $('#contents').fadeOut('slow', function(){
            $('#contents').load(url+' #contents', function(){
                $('#contents').fadeIn('slow');
            });
        });
        jPM.close();
    });

});

<强> CSS

#jPanelMenu-menu {
    overflow-y:hidden !important;
}
#trigger { padding: 5px; cursor: pointer; background: #000; }
.jpanelMenu { list-style: none; padding: 0px;}
.jPanelMenu li a {
    background: none repeat scroll 0 0 #000000;
    line-height: 20px;
    padding: 20px;
    text-align: left;
    display: block;
    color:#FFF;
}
.jPanelMenu li a:hover {
    background: none repeat scroll 0 0 #ccc;
    text-decoration: none;
    text-align: center;
    color: #999;
    cursor: pointer;
    font-weight: bold;
}

您还必须更改某些脚本。建议http://jpanelmenu.com/。

如果你需要我的帮助。请通过搜索yeshansachithak找到我的社交网络。

如何制作左侧导航菜单

1 个答案: