html - 如何创建响应式侧边菜单布局-6ren

html - 如何创建响应式侧边菜单布局

转载作者：行者123 更新时间：2023-11-28 06:20:42

28

4

这是网站的链接 (http://pavilioncreative.com/)，如果您没有看到全屏 gif 作为背景，请点击刷新。

无论屏幕大小如何，我都试图让红色框始终居中。问题是侧边菜单的位置是固定的，因此主要内容 div 在侧边菜单下的屏幕上完全 100% 拉伸(stretch)。

我想我可能做错了？

    <html lang="en">

    <head>

    <title>FirstPage</title>

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

    <link rel="stylesheet" href="css/reset.css" >
    <link rel="stylesheet" href="css/text.css" >
    <link rel="stylesheet" href="css/style.css">
    <link href='https://fonts.googleapis.com/css?family=Lora:400,700' rel='stylesheet' type='text/css'>


    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

    </head>

    <body>

<div class="wraper">

        <ul>

    <li class="menu" >

            <div class="menu_tab_wrap">

     <div class="menu_tab">

         <div class="menu_off_wrap">

         <div class="menu_off">

             <div class="barOne"></div>
             <div class="spacer"></div>
             <div class="barTwo"></div>
             <div class="spacer"></div>
             <div class="barThree"></div>

         </div>



        </div>

     </div> 

     </div>

     <div class="menu_tab_wrap_on">

     <div class="menu_tab_on">

         <div class="menu_on_wrap">

         <div class="menu_on">

             <div class="cross"></div>


         </div>



        </div>

     </div> 

     </div>

     <div class="logo_wrap">

            <div class="logo">

                <img src="img/logo.svg">

            </div>

         </div>


            </li>

              <section id="menu_out">

         <div class="menu_inner_wrap">

         <div class="menu_list">

         <ul class="menu_ul">

             <li class="menu_li"> <a href="#">Home</a> </li>
             <span class="in_lable">Back to the home page</span>
             <li class="menu_li"> <a href="#">About</a> </li>
             <span class="in_lable">Find out more about me</span>
             <li class="menu_li"> <a href="#">Portfolio</a> </li>
             <span class="in_lable">Take a look at my past work</span>
             <li class="menu_li"> <a href="#">Contact Me</a> </li>
             <span class="in_lable">Get in contact with me</span>

        </ul>

         </div>



             </div>

     </section>

    <li class="content">
        <div class="content_wrap">

            <h1>test</h1>
            </div>
            </li>


    </ul>



        </div>


        <script type="text/javascript">



        $(document).ready(function () {

    var hoverIn = false; //You need this counter to detect whether animate occurs.
$(".menu_tab").hover(function() {
    if (hoverIn)return; //if the hover is activated, it stops the function

  //I also took the liberty to help you add stop to prevent multiple hover. Feel free to implement that else where
  $(".barOne").stop(true, true).animate({
    "bottom": "+=5px"
  }, "fast");
  $(".barThree").stop(true, true).animate({
    "top": "+=5px"
  }, "fast");
  hoverIn = true;
}, function() {
    if (!hoverIn)return; //if the hover is deactivated, it stops this function
  $(".barOne").stop(true, true).animate({
    "bottom": "-=5px"
  }, 300);
  $(".barThree").stop(true, true).animate({
    "top": "-=5px"
  }, 300);
  hoverIn = false;
});

            });











       $(document).ready(function () {

        if($(window).width() > 700) {
             $(".menu_tab").click(function(){
             $("#menu_out").animate({"width": "30em"}, "slow");
             $(".menu_tab_wrap_on").stop().fadeIn();
             $(".menu_list").stop().delay( 400 ).fadeIn('slow');

            });

        }else{

             $(".menu_tab").click(function(){
             $("#menu_out").animate({"width": "100%"}, "slow");
             $(".menu_tab_wrap_on").stop().fadeIn();
             $(".menu_list").stop().delay( 400 ).fadeIn('slow');


            });

        }

                });


       $(document).ready(function () {

             $(".menu_tab_wrap_on").click(function(){
             $(".menu_tab_wrap_on").stop().hide('fast');
             $("#menu_out").animate({"width": "0em"}, "slow");
             $(".menu_list").stop().hide();
            });

                });











   </script>

    </body>


</html>




html{

    -webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape */

}

.wraper{

    width: 100%;
    margin: auto;
    padding: 0;

}


.wraper ul{

    width: 100%;
    margin: 0 auto;
    padding: 0;

}

.wraper ul li{

    padding: 0;
    margin: 0 auto;
    display: inline-block;

}

.wraper ul .menu{

    width: 7%;
    min-width: 7em;
    max-width: 7em;
    background: black;
    height: 100%;
    position: fixed;
    z-index: 20;
    float: left;


}


.wraper ul .content{

    background-color: blue;
    width: 93%;
    height: 70em;
    float: right;

}

.wraper ul .content .content_wrap{

    width: 80%;
    margin: auto;
    text-align: center;
    border: red solid 1px;


}





























.menu .menu_tab_wrap{

    position: relative;

}

.menu .menu_tab{

    width: 100%;
    background-color: #232323;
    height: 6em;
    display: table;
    position: absolute;
    width: 100%;
    cursor: pointer;
}



.menu .menu_tab .menu_off_wrap {
    width: 100%;
    height: 100%;
    display: table-cell;
    vertical-align: middle;



}

.menu .menu_tab .menu_off_wrap .menu_off{

   margin-left: auto;
    margin-right: auto; 
    position: relative;



}





.menu .menu_tab .menu_off_wrap .menu_off .barOne,.barTwo,.barThree{

    width: 3em;
  padding: 2px;
  background-color: white;
    margin: auto;
    position: relative;


}

.menu .menu_tab .menu_off_wrap .menu_off .spacer{

    width: 5em;
    height: 5px;


}



.menu .menu_tab_wrap_on{

    position: relative;
    display: none;





}

.menu .menu_tab_wrap_on .menu_tab_on{

    width: 100%;
    background-color: white;
    height: 6em;
    display: table;
    position: absolute;
    width: 100%;
    cursor: pointer;
}



.menu .menu_tab_wrap_on .menu_tab_on .menu_on_wrap {
    width: 100%;
    height: 100%;
    display: table-cell;
    vertical-align: middle;



}

.menu .menu_tab_on .menu_on_wrap .menu_on{

   margin-left: auto;
    margin-right: auto; 
    position: relative;
    text-align: center;



}





.menu .menu_tab_on .menu_on_wrap .menu_on .cross{


  width: 3em;
  height: 3em;

  color: #232323;
  margin: auto;
  position: relative;

}




.cross:before, .cross:after {
  position: absolute;

  content: ' ';
  height: 3em;
  width: 4px;
  background-color: #333;
}
.cross:before {
  transform: rotate(45deg);
}
.cross:after {
  transform: rotate(-45deg);
}



.menu .logo_wrap{

    width: 100%;
    text-align: center;


}

.menu .logo_wrap .logo{

    width: 7em;
   margin: auto;
    position:absolute;
   bottom:0;
    padding-bottom: 2em;

}

.menu .logo_wrap .logo img{

    width: 70%;
    height: auto;

}
















#menu_out{

    background-color: #232323;
    height: 100%;
    width: 0em;
    position: fixed;
    z-index: -1;

    overflow-y:scroll;
    overflow-x:hidden;
    border-right: 0.5em black solid;
    z-index: 10;


}


#menu_out .menu_inner_wrap{

    position: relative;



}


#menu_out .menu_list{

    width: 70%;
    height: auto;
    margin: auto;
    padding-top: 5em;
    padding-bottom: 0em;
    display: none;
    position: relative;


}


#menu_out .menu_list .menu_ul{

    padding: 0;
    margin: 0 auto;
    width: 100%;
    padding-left: 4em;
    padding-bottom: 2em;



}

#menu_out .menu_list .menu_ul .menu_li{

    display: block;
    padding: 0;
    margin: 0 auto;


}

#menu_out .menu_list .menu_ul .menu_li a{

    font-size: 40px;
    color: white;
    text-decoration: none;
    font-family: 'Lora', serif;
    font-weight: 700;
    opacity: 0.8;


}


#menu_out .menu_list .menu_ul .menu_li a:hover{

    opacity: 1;

}


#menu_out .menu_list .menu_ul .in_lable{

    font-size: 15px;
    color: #80E577;
    font-weight: 100;
    font-family: 'Open Sans', sans-serif;
    position: relative;
    bottom: 10px;;


}


#menu_out .menu_inner_wrap .footer{

    width: 100%;

    margin: auto;

    position:absolute;
   bottom:0;
    height: 10em;

}












































@media only screen and (max-width: 800px) {

    .wraper ul .content{

    background-color: blue;
    width: 90%;
    height: 70em;
    float: right;

}


}




@media only screen and (max-width: 700px) {

  .wraper ul .content{

    background-color: blue;
    width: 100%;
    height: 70em;
    float: none;

}

    .wraper ul .menu{

    width: 100%;
    min-width: none;
    max-width: none;
    height: 5em;



}


    .menu .menu_tab{


    height: 100%;
    display: table;
    position: absolute;
    width: 6em;
    cursor: pointer;
        right: 0;
}



    .menu .logo_wrap{

    width: 100%;
    text-align: center;



}

.menu .logo_wrap .logo{

    width: 7em;
   margin: auto;
    position:absolute;
   bottom:0;

    padding-top: 1em;
        padding-bottom: 1em;

}


    .menu .menu_tab_wrap_on .menu_tab_on{

    width: 6em;

    height: 100%;

    right: 0;
    }



    #menu_out .menu_list{

    width: 100%;
    height: auto;
    margin: auto;
    padding-top: 8em;
    text-align: center;



}

    #menu_out .menu_list .menu_ul{

    padding: 0;
    margin: 0 auto;
    width: 100%;
    padding-left: 0em;
        text-align: center;

}


    #menu_out .menu_list .menu_ul .menu_li a{

    font-size: 35px;
    color: white;
    text-decoration: none;
    font-family: 'Lora', serif;
    font-weight: 700;

}


#menu_out .menu_list .menu_ul .menu_li a .in_lable{

    font-size: 10px;
    color: #80E577;
    font-family: 'Open Sans', sans-serif;
    font-weight: 100;

}


    #menu_out{

       width: 0; 
        border-right: none;

    }



}

最佳答案

看看你的 CSS，我看到了这个:

#content_wrap .content {
    max-width: 1050px;
    width: 80%;
    margin: auto;
    height: 700em;
     border: red solid 1px;
    margin-right: 7%;
    margin-left: 13%;
}

如果您删除 margin left 和 margin right，它是否实现了您所追求的目标？

例子:

#content_wrap .content {
    max-width: 1050px;
    width: 80%;
    margin: auto;
    height: 700em;
     border: red solid 1px;
}

(当您删除 margin-left 和 margin-right 时，margin: auto 将自动应用于 margin top、right、bottom ，然后离开。)

2016 年 2 月 25 日更新:

完成上述步骤后，您就完成了大部分工作。但是，如果您希望内容在菜单从左侧展开时更改其位置(或重新居中)，则需要更多的 CSS 和一些 JavaScript 来添加和删除类。 注意:上述 CSS 更改是实现此功能所必需的。

#content_wrap{
   //This should be the exact same with as the menu when it's not expanded out
    padding-left: 7em;
    //Set this to the same amount of time it takes for the menu to expand
    //This will animate the effect using CSS
    transition: 0.5s; 
}

#content_wrap.menu_showing {
   //This should be the exact same with as the menu when it's expanded out
    padding-left: 30em
}

现在只需在单击“展开菜单”图标时使用 JavaScript 打开和关闭该类。下面是一个使用 jQuery 的示例:

$(".menu_tab").click(function(){
    $("#content_wrap").toggleClass("menu_showing");
});

关于html - 如何创建响应式侧边菜单布局，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35614411/

28

4

0

文章推荐： swift - 类型 'SCNVector3' 的值没有成员 'length'

文章推荐： c++ - opencv 阈值或不等于运算符

文章推荐：带有负数的 Java Bitshift 错误？

jquery - 桌面上的非 Canvas 菜单，手机上的 Accordion 菜单 [Foundation 6.3]
使用 Foundation 6.3.1，我希望在桌面上显示 Canvas 外菜单，在移动设备上显示 Accordion 菜单。例如 This is the desktop view with a co
Javascript 菜单
function HideandUNhideObj(ThisObj) { var nav = document.getElementById(ThisObj).style if (nav.displ
JavaScript 菜单
我正在处理一个页面，该页面有一个显示“更新”的链接。当用户单击此链接时，我希望表单使用幻灯片效果并显示在链接下方。提交表单后，它会更新数据库，并且菜单会显示。我知道这可以用 JavaScript 来
带图标的 Gtk 菜单
这是我的运行时创建菜单的关键部分: GtkWidget *menu, *menu_item; menu = gtk_menu_new(); menu_item = gtk_image_menu_ite
Css3 donut 菜单
您好，我想实现一个像这样的 donut 菜单 http://dribbble.com/shots/610433-Wheel-Nav我知道有一种在 css3 中制作 donut 的简单方法。 .doug
SwiftUI 菜单 - 菜单实际打开时的操作
我的应用程序中有一个菜单，当菜单打开时我会触发触觉反馈(来自 onTagGesture Action )。然而有时当我点击菜单打开触发器时，菜单实际上不会打开，但我仍然收到触觉反馈。我只在菜单实际
悬停时带有边框半径的 CSS 菜单
也许这是一个简单的解决方案，但我坚持了下来。这里有我的代码 http://jsbin.com/ejomuv纯CSS菜单我想要做的是在悬停时在下拉按钮底部设置 0px 边框半径，但仅在下拉菜单上设置
controls - 寻找替代品或改进网站上的下拉列表/菜单
下拉列表、菜单和组合框都是非常常见的用户界面元素。用户习惯于在 native 应用程序和 Web 应用程序中看到这些元素，但它们存在一些问题。您必须瞄准鼠标。当您将鼠标移开时，有些菜单会折叠，而有些
基于角色的 Laravel 菜单？
我有 codeigniter 背景。现在，我正在学习 Laravel。所以，我处于这种情况(示例)，我正在尝试创建一个具有多个用户的 web 应用程序。用户类型 A ，他们可以访问菜单 a、菜单 b
显示一个框的 JQuery 菜单
我正在学习 JQuery 的基础知识，我的老师显示的 menu() 看起来根本不像我的。这是我创建的菜单的 LAF: 代码: Hello Hi Welcome World
jquery如何隐藏

首页

博学

6Ren·AI

商城

html - 如何创建响应式侧边菜单布局