Question

我正在尝试实现侧面导航栏，它可以调整大小并在栏上有一个按钮，即点击侧面导航应该打开的按钮，然后再点击它应该关闭的按钮。我无法在栏上实现按钮部分。你能帮帮我..

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<title>AngularJS Navigation</title>
<script>document.write('<base href="' + document.location + '" />');
</script>
<link href="style.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-2.0.3.min.js" data-semver="2.0.3" data-require="jquery"></script>
<script data-semver="1.2.13" src="http://code.angularjs.org/1.2.13/angular.js" data-require="angular.js@1.2.x"></script>
<script src="app.js"></script>
<script src="resizer.js"></script>

</head>

  <body ng-controller="MainCtrl">

  <div id="topnav">Top navbar</div>

  <div id="sidebar">
    <h3>Side Navbar</h3>
  </div>

  <div id="content">

    <div id="top-content">Top content <p>{{content}}</p></div>

    <div id="content-resizer" 
        resizer="horizontal" 
        resizer-height="6" 
        resizer-top="#top-content" >
    </div>

  </div>

  <div id="sidebar-resizer" 
    resizer="vertical" 
    resizer-width="6" 
    resizer-left="#sidebar" 
    resizer-right="#content"
    resizer-max="100%">
   </div>

   </body>

   </html>

“app.js”代码

  var app = angular.module('myApp', ['mc.resizer']);

app.controller('MainCtrl', function($scope) {
  $scope.content = 'Hello World';
});

“resizer.js”的代码

 angular.module('mc.resizer', []).directive('resizer', function($document) {

    return function($scope, $element, $attrs) {

        $element.on('mousedown', function(event) {
            event.preventDefault();

            $document.on('mousemove', mousemove);
            $document.on('mouseup', mouseup);
        });

        function mousemove(event) {

            if ($attrs.resizer == 'vertical') {
                // Handle vertical resizer
                var x = event.pageX;

                if ($attrs.resizerMax && x > $attrs.resizerMax) {
                    x = parseInt($attrs.resizerMax);
                }

                $element.css({
                    left: x + 'px'
                });

                $($attrs.resizerLeft).css({
                    width: x + 'px'
                });
                $($attrs.resizerRight).css({
                    left: (x + parseInt($attrs.resizerWidth)) + 'px'
                });

            } else {
                // Handle horizontal resizer
                var y = window.innerHeight - event.pageY;

                }
        }

        function mouseup() {
            $document.unbind('mousemove', mousemove);
            $document.unbind('mouseup', mouseup);
        }
    };
});

“style.css”代码

#topnav {
    background-color: #333333;
    display: block;
    height: 35px;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    background-color: #DDD;
}

#sidebar {
    background-color: #AEE;
    position: absolute;
    top: 35px;
    bottom: 0;
    left: 0;
    width: 200px;
    overflow: auto;
}
#content {
    position: absolute;
    top: 35px;
    bottom: 0;
    left: 205px /* 200 + 6*/;
    right: 0;
    overflow: hidden;
    color: #FFF;

}
#top-content {
    position: absolute;
    top: 0;
    bottom: 0px; /* 130 + 6 */
    left: 0;
    right: 0;
    background-color: #444;
    overflow: auto;
}

#sidebar-resizer {
    background-color: #666;
    position: absolute;
    top: 35px;
    bottom: 0;
    left: 200px;
    width: 5px;
    cursor: e-resize;
}
#content-resizer {
    position: absolute;
    height: 6px;
    bottom: 0px;
    left: 0;
    right: 0;
    background-color: #666;
    cursor: n-resize;
}

#sidebar-resizer:hover, #preview-resizer:hover {
    background-color: #AAA;
}

Answer 1

试试这个希望它有助于ng-init用于初始化侧边栏的状态

<button type="button" ng-click="toggleSideBar=!toggleSideBar">Click Me!</button>
<div id="sidebar" ng-show="toggleSideBar" ng-init="toggleSideBar=true">
    <h3>Side Navbar</h3>
</div>

Answer 2

＆＃13;

/* Set the width of the side navigation to 250px */
function openNav() {
    document.getElementById("mySidenav").style.width = "250px";
}

/* Set the width of the side navigation to 0 */
function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
}

＆＃13;

/* The side navigation menu */
.sidenav {
    height: 100%; /* 100% Full-height */
    width: 0; /* 0 width - change this with JavaScript */
    position: fixed; /* Stay in place */
    z-index: 1; /* Stay on top */
    top: 0; /* Stay at the top */
    left: 0;
    background-color: #111; /* Black*/
    overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 60px; /* Place content 60px from the top */
    transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}

/* The navigation menu links */
.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
    color: #f1f1f1;
}

/* Position and style the close button (top right corner) */
.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
    transition: margin-left .5s;
    padding: 20px;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
}

＆＃13;

<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
</div>

<!-- Use any element to open the sidenav -->
<span onclick="openNav()">open</span>

<!-- Add all page content inside this div if you want the side nav to push page content to the right (not used if you only want the sidenav to sit on top of the page -->
<div id="main">
  ...
</div>

＆＃13;

试试这个例子。希望这有效..请在下面评论任何问题

Answer 3

/* When the user clicks on the button, 
toggle between hiding and showing the dropdown content */
function myFunction() {
    document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

/* Dropdown Button */
.dropbtn {
    background-color: #3498DB;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
    background-color: #2980B9;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}

<div class="dropdown">
  <button onclick="myFunction()" class="dropbtn">Dropdown</button>
  <div id="myDropdown" class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

调整下拉按钮的高度和宽度，以获得响应式外观。希望这符合您的要求。评论任何问题。

如何获得可调整大小和可折叠的侧边栏？

3 个答案: