Question

我已经制作了导航，它在桌面上工作正常，完全响应，但是当我试图模仿移动而不是推动div元素时，它只是缩小了一切。你可以看到这个在行动

HTML（通过include语句插入）

List<object> list = new List<object>();

 for (int i = 0; i < list.Count; i++)
 {
      SomeMethodThatDoesSomethingWithAnObject(list[i]);
 }

结束HTML

<header id="headers" class="nav-main "> <!-- animated fadeInDown-->
        <div class="logo">
        <img src="img/logo.png" alt="modren-day-thrones-logo"/>
        </div>
            <ul>  
            <li>
                <a href="homepage.php" class="nav-item">Home</a>
            </li>
            <li>
            <a href="index.php" class="nav-item">Chairs</a>
            <div class="nav-content">
                <div class="nav-sub">
                    <ul>


                     <li>
                         <a href="#">Executive</a>
                     </li>

                     <li>
                         <a href="#">Office</a>
                     </li>
                     <li>
                         <a href="#">Lounge</a>
                     </li>
                    </ul>
                </div>
            </div>
            </li>

            <li>
            <a href="#!" class="nav-item">About Us</a>
            </li>


                 <?php
            if(isset($_SESSION['logged_in'])){ ?>

          <li>
            <a href="add-new-chair.php" class="nav-item">Add</a>
            </li>
            <li>
            <a href="logout.php" class="nav-item">Log Out </a>
            </li> 
       <?php
            }else{ ?>
                <li>
                <a href="login.php" class="nav-item">Login </a>
               </li>
            <?php    
                }

                ?>

            </ul>

            </header>



        <div class="main-header-mobile-box">
        <header class="mobile pushmenu-push">

        <nav>
        <div class="innerbutton">
            <div class="catagoerys">
             <!--<div id="cpBtn" class="nav-toggel">-->
            <div class="menuebutton group">
            <i class="fa fa-bars" id="nav_list"></i>
                </div>


        </header>
       </div>      
<body class="pushmenu-push">
 <nav class="pushmenu pushmenu-left">
                <h3>Menu</h3>
                <a href="homepage.php"><i class="fa fa-home"></i> Home </a>
                <a href="index.php"> <i class="fa fa-folder-open"></i>Chairs </a>
                <a href=""> <i class="fa fa-folder"></i> Executive </a>
                <a href=""> <i class="fa fa-folder"></i> Office </a>
                <a href=""> <i class="fa fa-folder"></i> Lounge </a>
                <a href=""> <i class="fa fa-fw fa-list"></i> About Us </a>
                <a href="login.php"> <i class="fa fa-sign-in"></i> Login </a>
                 <?php
            if(isset($_SESSION['logged_in'])){ ?>
                <a href="/lists"> <i class="fa fa-sign-out"></i> Log Out </a>
                <a href="add-new-chair.php"><i class="fa fa-plus"></i>Add</a>
        <?php
            }
                ?>  

                <hr>
            </nav>


    <div class="container">
     <div class="main">
        <section class="buttonset">
              <div id="nav_list">Menu</div>
        </section>

移动特定效果

  body{
        text-align:center;
        font:1em "Open Sans", sans-serif;
        width:70%;  
        min-width: 349px;
        max-width: 1490px;
        margin:0 auto;
        overflow-x: hidden;
        display: block;
    }
    .pushmenu { /*this is the nav*/
      background: #3c3933;
      font-family: Arial, Helvetics, sans-serif;
      width: 240px;
      height: 100%;
      top: 0;
      z-index: 1000;
      position:fixed;
    }
    .right-login-mobile-nav{
        float: right;
        display: inline-block;

    }
    .break-bar{
        width:100%;
        display: block;
    }
    .pushmenu h3 {
      color: #cbbfad;
      font-size: 14px;
      font-weight: bold;
      padding: 15px 20px;
      margin: 0;
      background: #282522;    
      height: 16px;
    }
     .buttonset{
            display: none;
        }
    .pushmenu a {
      display: block; /* drops the nav vertically*/
      color: #fff;
      font-size: 16px;
      font-weight: bold;
      text-decoration: none;
      border-top: 1px solid #56544e;
      border-bottom: 1px solid #312e2a;
      padding: 14px;
    }

    .pushmenu a:hover {
      background:#333;
    }

    .pushmenu a:active {
      background: #454f5c;
      color: #fff;
    }

    .pushmenu-left {
      left: -240px;

    }

    .pushmenu-left.pushmenu-open {
      left: 0;
    }

    .pushmenu-push {
      overflow-x: hidden;
      position: relative;
      left: 0;
    }

    .pushmenu-push-toright {
      left: 240px;
    }

    /*Transition*/
    .pushmenu, .pushmenu-push {
      -webkit-transition: all 0.3s ease;
      -moz-transition: all 0.3s ease;
      transition: all 0.3s ease;  
    }

    #nav_list {
      background: url(http://www.onlywebpro.com/demo/jquery/icon_nav.png) no-repeat left top;
      cursor: pointer;
      height: 27px;
      width: 33px;
      text-indent: -99999em;
    }

    nav-list.active {
      background-position: -33px top;
    }

     .buttonset {
          background: #fff;
          height: 16px;
          padding: 10px 20px 20px;
     }

Answer 1

显然这个头文件中的代码修复了吗？然而，这里和那里似乎有一些小问题。

<meta name="viewport" content="width=device-width,initial-scale=1.0">

移动滑动推送导航

1 个答案: