使中心的绝对下拉元素

问题描述 投票：0回答：1

我已经建立了与元素的标题。我想我的下拉元素，出现在点击（jQuery的），它们的父元素为中心，并采取了根据需要尽可能多的空间，但仅此而已。

我试过让他们绝对的对象，这并没有帮助，因为头在下拉菜单的appearence扩大。

这是我的HTML：

<!DOCTYPE html>
<html>

    <head>

        <link href="header.css" rel="stylesheet">   
        <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">

        <title>header</title>

    </head>

    <body>

        <div id="header">

            <div id="header_menu">

                <div class="header_menu_wrapper">

                    <div class="header_menu_flexelement">PLÄNE</div>

                    <div id="header_menu_dropdown_wrapper">

                        <div class="header_menu_dropdown">UnterPLÄNE</div>

                        <div class="header_menu_dropdown">UnterPLÄNE</div>

                        <div class="header_menu_dropdown">UnterPLÄNE</div>

                        <div class="header_menu_dropdown">UnterPLÄNE</div>

                        <div class="header_menu_dropdown">UnterPLÄNE</div>

                    </div>

                </div>          

                <div class="header_menu_wrapper">

                    <div class="header_menu_flexelement">PROFIL</div>

                    <div id="header_menu_dropdown_wrapper">

                        <div class="header_menu_dropdown">UnterPROFIL</div>

                        <div class="header_menu_dropdown">UnterPROFIL</div>

                        <div class="header_menu_dropdown">UnterPROFIL</div>

                    </div>

                </div>            

                <div class="header_menu_wrapper"><div class="header_menu_flexelement"><a href="../index.html">HOME</a></div></div>

                <div class="header_menu_wrapper">

                    <div class="header_menu_flexelement">TERMINE</div>

                    <div id="header_menu_dropdown_wrapper">

                        <div class="header_menu_dropdown">UnterTERMINE</div>

                        <div class="header_menu_dropdown">UnterTERMINE</div>

                        <div class="header_menu_dropdown">UnterTERMINE</div>

                    </div>

                </div>   

                <div class="header_menu_wrapper">

                    <div class="header_menu_flexelement">KONTAKT</div>

                    <div id="header_menu_dropdown_wrapper">

                        <div class="header_menu_dropdown">UnterKONTAKT</div>

                        <div class="header_menu_dropdown">UnterKONTAKT</div>

                        <div class="header_menu_dropdown">UnterKONTAKT</div>

                    </div>

                </div>    

            </div>

        </div>

        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script>

            $('.header_menu_flexelement').on('click',function() {

                $(this).next('div').slideToggle(300);

            });

        </script>

    </body>

</html>

    this is my css:

body {
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
}

#header {
    position: relative;
    background: #fff;
    width: 100%;
    min-height: 10vh;
    display: flex;
    align-items: center;
    justify-content: space-around;
    border-bottom: solid 5px #F27405;
    z-index: +3;
}
#header_menu {
    display: inline-flex;
}
.header_menu_wrapper {

    position: relative;
    justify-content: space-around;
}
#header_menu_dropdown_wrapper {
    position: absolute;
    padding: 10px;
    background: #ddd;
    border-left: 2px solid #F27405;
    display: none; 
}
.header_menu_dropdown {
    margin: 10px auto;
    color: #F27405;
    font-size: 20pt;
}
.header_menu_flexelement {
    position: relative;
    padding: 5px 20px;
    color: #F27405;
    font-size: 20pt;
    transition: all 500ms;
    user-select: none;
    text-align: center;
}
.header_menu_flexelement a {
    color: #F27405;
    font-size: 20pt;
    text-decoration: none;
}
.header_menu_flexelement:hover {
    cursor: pointer;
}
#header_logo {
    position: absolute;
    left: 0;
    height: 100%;
}
#header_search_icon {
    position: absolute;
    right: 0;
    height: 100%;
    margin-right: 20px;
    user-select: none;
}
a {
    text-decoration: none;
}
html css drop-down-menu header dropdown
1个回答
0
投票

你是几乎没有。唯一缺少的是left和right属性添加到绝对定位的元素。我加入了下文提到的代码：

请点击“运行片段”下面给出的工作演示。

#header_menu_dropdown_wrapper {
    left: 0;
    right: 0; /* Left and Right 0 makes sure that the dropdown item stays at the left and right most edge of the relative parent. */
    overflow: hidden; /* This makes sure that the content does not overflow */
    word-wrap: break-word; /* This makes sure that the words are not hidden and rather break down to new line */
}


$('.header_menu_flexelement').on('click',function() {

                $(this).next('div').slideToggle(300);

            });
body {
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
}

#header {
    position: relative;
    background: #fff;
    width: 100%;
    min-height: 10vh;
    display: flex;
    align-items: center;
    justify-content: space-around;
    border-bottom: solid 5px #F27405;
    z-index: +3;
}
#header_menu {
    display: inline-flex;
}
.header_menu_wrapper {

    position: relative;
    justify-content: space-around;
}
#header_menu_dropdown_wrapper {
    position: absolute;
    padding: 10px;
    background: #ddd;
    border-left: 2px solid #F27405;
    display: none; 
    left: 0;
    right: 0;
    overflow: hidden;
    word-wrap: break-word;
}
.header_menu_dropdown {
    margin: 10px auto;
    color: #F27405;
    font-size: 20pt;
}
.header_menu_flexelement {
    position: relative;
    padding: 5px 20px;
    color: #F27405;
    font-size: 20pt;
    transition: all 500ms;
    user-select: none;
    text-align: center;
}
.header_menu_flexelement a {
    color: #F27405;
    font-size: 20pt;
    text-decoration: none;
}
.header_menu_flexelement:hover {
    cursor: pointer;
}
#header_logo {
    position: absolute;
    left: 0;
    height: 100%;
}
#header_search_icon {
    position: absolute;
    right: 0;
    height: 100%;
    margin-right: 20px;
    user-select: none;
}
a {
    text-decoration: none;
}
<!DOCTYPE html>
<html>

    <head>

        <link href="header.css" rel="stylesheet">   
        <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">

        <title>header</title>

    </head>

    <body>

        <div id="header">

            <div id="header_menu">

                <div class="header_menu_wrapper">

                    <div class="header_menu_flexelement">PLÄNE</div>

                    <div id="header_menu_dropdown_wrapper">

                        <div class="header_menu_dropdown">UnterPLÄNE</div>

                        <div class="header_menu_dropdown">UnterPLÄNE</div>

                        <div class="header_menu_dropdown">UnterPLÄNE</div>

                        <div class="header_menu_dropdown">UnterPLÄNE</div>

                        <div class="header_menu_dropdown">UnterPLÄNE</div>

                    </div>

                </div>          

                <div class="header_menu_wrapper">

                    <div class="header_menu_flexelement">PROFIL</div>

                    <div id="header_menu_dropdown_wrapper">

                        <div class="header_menu_dropdown">UnterPROFIL</div>

                        <div class="header_menu_dropdown">UnterPROFIL</div>

                        <div class="header_menu_dropdown">UnterPROFIL</div>

                    </div>

                </div>            

                <div class="header_menu_wrapper"><div class="header_menu_flexelement"><a href="../index.html">HOME</a></div></div>

                <div class="header_menu_wrapper">

                    <div class="header_menu_flexelement">TERMINE</div>

                    <div id="header_menu_dropdown_wrapper">

                        <div class="header_menu_dropdown">UnterTERMINE</div>

                        <div class="header_menu_dropdown">UnterTERMINE</div>

                        <div class="header_menu_dropdown">UnterTERMINE</div>

                    </div>

                </div>   

                <div class="header_menu_wrapper">

                    <div class="header_menu_flexelement">KONTAKT</div>

                    <div id="header_menu_dropdown_wrapper">

                        <div class="header_menu_dropdown">UnterKONTAKT</div>

                        <div class="header_menu_dropdown">UnterKONTAKT</div>

                        <div class="header_menu_dropdown">UnterKONTAKT</div>

                    </div>

                </div>    

            </div>

        </div>

        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        

    </body>

</html>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.