按钮单击“移动整个HTML正文”

时间：2015-06-09 13:14:03

标签： jquery html css button drop-down-menu

我有一个非常基本的网页设置，其中包含一个由按钮点击触发的下拉菜单。当我点击按钮时，下拉菜单会显示自己，但也会移动该页面的全部内容。我不确定是什么导致这种情况，并希望得到任何帮助。提前谢谢！

以下是实时链接：http://copy-writer-shipments-14524.bitballoon.com/

这是我的HTML：

<!DOCTYPE html>
<html>
<head>
    <title>ManaBadi</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="./styles.css">
    <script src="./jquery_min.js"></script>
    <script src="./button_dropdown_menu.js"></script>
    <script src="./nav_hide_show.js"></script>
</head>
<body>
<div id="main_content_container">
    <header>
    <span>ManaBadi</span>
    <img src="./menu100.png" id="hamburger_menu_icon" alt="menu icon">
        <ul id="nav_ul">
            <li><a href="#">Home</a></li>
            <li><a href="#">Goal</a></li>
            <li><a href="#">Courses</a></li>
            <li><a href="#">Locations</a></li>
            <li><a href="#">Class Schedule</a></li>
            <li><a href="#">ManaBadi Team</a></li>
            <li><a href="#">Photo Gallery</a></li>
            <li><a href="#">Video Gallery</a></li>
            <li><a href="#">FAQ</a></li>
            <li><a href="#">Contact Us</a></li>
        </ul>
    </header>
    <div id="media_scroll">
        <div id="scrolling_text">
            <p>ManaBadi Admissions Open for 2015-2016 Academic Year.  To Open ManaBadi New Location Contact sarath@siliconandhra.org or Call 203 583 9537</p>
        </div>
    </div>
    <h3>Locations</h3>
<div>
    <ul id="button_ul">
        <li>
            <button id="select_region_button"><p>Select Region</p></button>
            <ul class="dropdown_menu" id="region_dropdown_menu">
                <li class="region_locations">Select Region</li>
                <li class="region_locations"><a href="#">USA South-West</a></li>
                <li class="region_locations"><a href="#">USA Mid-West</a></li>
                <li class="region_locations"><a href="#">USA South-East</a></li>
                <li class="region_locations"><a href="#">USA North-East</a></li>
                <li class="region_locations"><a href="#">USA West</a></li>
                <li class="region_locations"><a href="#">Hong Kong</a></li>
                <li class="region_locations"><a href="#">UK</a></li>
                <li class="region_locations"><a href="#">Canada</a></li>
                <li class="region_locations"><a href="#">Kuwait</a></li>
                <li class="region_locations"><a href="#">Norway</a></li>
                <li class="region_locations"><a href="#">Singapore</a></li>
                <li class="region_locations"><a href="#">New Zealand</a></li>
                <li class="region_locations"><a href="#">Malaysia</a></li>
                <li class="region_locations"><a href="#">Austrailia</a></li>
                <li class="region_locations"><a href="#">Dubai</a></li>
                <li class="region_locations"><a href="#">Scotland</a></li>
                <li class="region_locations"><a href="#">Nigeria</a></li>
                <li class="region_locations"><a href="#">South Africa</a></li>
                <li class="region_locations"><a href="#">Netherlands</a></li>
                <li class="region_locations"><a href="#">Switzerland</a></li>
                <li class="region_locations"><a href="#">Kingdom of Saudi Arabia</a></li>
            </ul>
        </li>
        <li>
            <button id="select_state_button"><p>Select State</p></button>
            <ul class="dropdown_menu" id="state_dropdown_menu">
                <li class="state_locations">Select State</li>
            </ul>
        </li>
        <li>
            <button id="select_city_button"><p>Select City</p></button>
            <ul class="dropdown_menu" id="city_dropdown_menu">
                <li class="city_locations">Select City</li>
            </ul>
        </li>
        <li>
            <button>GO</button>
        </li>
    </ul>
</div>
<div id="school_info_container">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</body>
</html>

我的CSS：

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (pub.*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}

body {
    line-height: 1;
}

ol, ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/*=============================RESET=================================*/

body, html {
    width: 100%;
    height: auto;
}

#main_content_container {
    width: 80%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: 0 auto;
    margin-top: 5%;
    padding: 10px;
    box-shadow: 2px 2px 10px lightgrey;
    -webkit-box-shadow: 2px 2px 10px lightgrey;
    -moz-box-shadow: 2px 2px 10px lightgrey;
    -ms-box-shadow: 2px 2px 10px lightgrey;
    -o-box-shadow: 2px 2px 10px lightgrey;
}

span {
    position: absolute;
    font-size: 3em;
    top: 15px;
    right: 0;
    bottom: 0;
    left: 0;
    width: 201px;
    height: 45px;
    margin: 0 auto;
    border-bottom: 2px solid black;
}

#nav_ul {
    width: 58%;
    margin: 0 auto;
}

#nav_ul li {
    display: inline-block;
    padding: 5px;
    margin-bottom: 10px;
    font-size: 1em;
    border-right: 1px solid black;
}

#nav_ul li:hover {
    background-color: yellow;
}

#nav_ul li:nth-child(10) {
    border-right: none;
}

#button_ul {
    width: auto;
    margin: 10px 0 10px 0;
}

#button_ul li {
    display: inline-block;
    padding: 0 20px;
}

#region_dropdown_menu li, #state_dropdown_menu li, #city_dropdown_menu li {
    width: auto;
    display: block;
    height: auto;
    padding: 2px 0;
}

a {
    text-decoration: none;
    cursor: pointer;
}

a:visited {
    color: blue;
}

#hamburger_menu_icon {
    position: absolute;
    width: 40px;
    height: 40px;
    top: 15px;
    right: 0;
    bottom: 0;
    left: 15px;
}

#hamburger_menu_icon:hover {
    /*background-color: #66D9EF;*/
    background-color: yellow;
}

#media_scroll {
    display: none;
}

@media screen and (max-width: 1390px) {
    #main_content_container {
        margin-top: 6%;
    }
}

@media screen and (max-width: 1100px) {
    #main_content_container {
        margin-top: 7%;
    }
}

@media screen and (max-width: 975px) {
    #main_content_container {
        margin-top: 8%;
    }
}

@media screen and (max-width: 845px) {
    #main_content_container {
        margin-top: 9%;
    }
}

@media screen and (max-width: 740px) {
    #main_content_container {
        margin-top: 12%;
    }
}

@media screen and (max-width: 555px) {
    #main_content_container {
        margin-top: 14%;
    }
}

@media screen and (max-width: 475px) {
    #main_content_container {
        margin-top: 16%;
    }


@media screen and (max-width: 416px) {
    #main_content_container {
        margin-top: 19%;
    }
}

2 个答案:

答案 0 :(得分：1)

继承人的问题：您的菜单存在。

我知道，这听起来很讽刺，但这是真的。因为包含菜单的元素是内联的，就在那里，所以一旦展开它就会推送内容。一个快速解决方法是将其定位为与relative不同的内容 - 因为relative会将相对放置到其他周围的内容中。试试position: absolute。它看起来不太好，因为你必须以这种方式改变它的风格（给它一个背景等......）。通常人们使用position: fixed;将其相对于视口放置。

这是一个简单的示例，只需点击按钮即可将定位从relative切换到absolute位置，然后使用“显示”按钮查看一个小动画，以显示哪些内容有何不同推，但没有：

$("#switch").click(function(){ $("#menu").toggleClass("absolute"); });
$("#show").click(function(){ $("#menu").toggleClass("show"); });
html, body {
  height: 100%;
}

body > div {
  width: 100%;
  height: 30%;
  background: red;
}
body #content { background: yellow; }
body #menu {
  height: 0;
  -webkit-transition: height 500ms;
  transition: height 500ms;
  background: blue;
  overflow: hidden;
  position: relative;
}
body #menu.absolute {
  position: absolute;
  top: 0;
  left: 0;
}
body #menu.show {
  height: 20%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

<div id="header"></div>
<div id="menu">My Menu</div>
<div id="content"></div>

<br />
<input type="button" value="show" id="show" />
<input type="button" value="Switch relative with absolute" id="switch" />

请注意这一点，因为位于absolute的元素位于具有定位设置本身的最近父级的位置。因此，如果您创建包装器relative，您的菜单将从包装器的左上角而不是您的页面定位（尽管这可能是您正在寻找的结果）。要根据视口修复它，请使用fixed。 fixed（几乎）不受其他包装元素的影响（除非您忘记设置两个定位坐标，如top或left）。

答案 1 :(得分：-1)

将position:absolute添加到.dropdown_menu的css中，它将停止推送页面内容的菜单。

相关问题
最新问题