堆棧內存溢出
  簡體   English   中英

jQuery和CSS下拉菜單無法正確堆疊和定位

[英]jQuery & CSS dropdown menu not stacking & positioning correctly

 原文  2014-05-27 18:40:34  9   1    javascript/ jquery/ html/ css

問題描述

我遇到了jQuery＆CSS下拉菜單。 動畫可以完美播放。 但是，我無法使其正確定位。 屏幕尺寸更改時，它不會自行調整。 我遇到的另一個問題是，我已經將z-index設置為“堆疊”在所有其他事物的頂部，但事實並非如此。 任何人都可以幫助解決這些問題嗎？ 我包括的筆由於某種原因不能正常工作，但無論如何我都會把它包括在內。 http://codepen.io/RobbyT15/pen/Dkswt

的HTML 

<body>
    <div id="wrapper">
    <header>
        <nav>
            <ul class="mainMenu">
                <li><a href="index.html">Home / About Me</a></li>
                <li><a href="work.html">Work Experience</a>
                <ul class="subMenu">
                    <li><a href="#">Army(Active Duty)</a></li>
                    <li><a href="#">Army(Reserves)</a></li>
                    <li><a href="#">Geogria Southern</a></li>
                    <li><a href="#">The Weather Channel</a></li>
                    <li><a href="#">Flight Safety</a></li>
                    <li><a href="#">Freelance</a></li>
                </ul>
                </li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Projects</a></li>
                <li><a href="#">FAQ</a></li>
                <li><a href="#">Contact Me</a></li>
            </ul>
        </nav>
    </header>
        <div id="content">          
            <div id="imageHolder">
                <div id="imageBorder"></div>
                <img src="images/me.jpg" />
            </div>
            <h2>About Me</h2>
            <p>I have been in the Web Development/Web Design field for a little over two years. I am currently a student at Georgia Southern University, enrolled in their online Information Technology program and I'm scheduled to graduate in May 2014. Before starting my college career, I served nine years in the U.S. Army where I earned two Good Conduct Medals, two Army Commendation Medals, an Army Reserve Components Achievement Medal, and two Honorable Discharges.</p>

            <p>My experience with Web Development spans both the professional field and freelance. I worked for Georgia Southern University for two years as their student Web Developer where I was responsible for developing new applications for the school's new template and integrating existing sites into the new design while making the content look visually appealing and developing both front end and back end functionality. I also worked briefely for The Weather Channel as their Contracted Android Designer where I was responsible for designing an updated version of the tablet app as well as numerous other design projects.  I am currently working as a contracted front end web developer with FlightSafety International.</p>

            <p>I have experience working in most Web Design and Development languages including HTML, HTML5, CSS3, Javascript, jQuery, jQuery Mobile, and XML. I also have experience working with the Java programming language and limited experience with AJAX and JSON.</p>

            <h2>Hobbies</h2>
            <p>While I was in the Army, I received my PADI Advanced Open Water dive certification.  After not diving for a few years, I realized that I missed participating in the underwater adventures and decided to begin diving again.  I plan on continuing to advance my interest in this hobby and would like to, one day, achieve my Master Scuba Diver Certification.</p>

            <p>I also enjoy coaching little league soccer and baseball when I have the opportunities to do so.  As a child, I played both sports as a little leaguer and in high school, and club baseball while in college.  After getting injured and realizing that I had been away from the sports for too long between high school and college, I decided to focus on teaching rather than play them.</p>
        </div>
    </div>
</body>

的CSS 

body{
    background-color: #757575;
    color: #FFFFFF;
}

header{
    position: absolute;
    background-color: #000000;
    height: 65px;
    top: -68px;
    left: 0;
    right: 0;
    border-bottom: 3px inset #DDAA00;
    font-size: 14px;
    z-index: 0;
}

img{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}

nav{
    position: absolute;
    height: 55px;
    top: 5px;
    left: 0;
    right: 0;
    bottom: 5px;
    color: #DDAA00;
}

nav ul{
    text-align: center;
    margin-top: 13px;
    font-size: 1.25em;
}

nav ul li{
    display: inline;
    list-style: none;
    padding-right: 50px;
    text-decoration: none;
}

nav ul li a{
    text-decoration: none;
}

nav ul li a:link{
    color: #DDAA00;
}

nav ul li a:visited{
    color: #757575;
}

nav .subMenu{
    position: absolute;
    display: none;
    margin: 0;
    padding: 0;
    padding-top: 5px;
    left: 35%;
    right: 0;
    width: 160px;
    background-color: #000000;
    z-index: 99;
}

nav .subMenu li{
    position: relative;
    float: left;
    margin: 0;
    padding: 0;
    color: #FFFFFF;
    width: 100%;
    font-size: .8em;
    border-bottom: 3px inset #DDAA00;
    z-index: 99;
}

#wrapper{
    position: absolute;
    top: 68px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
}

#content{
    position: absolute;
    float: left;
    top: 75px;
    left: 15%;
    right: 20%;
    font-size: 16pt;
    z-index: 0;
}

#imageHolder{
    position: relative;
    float: left;
    width: 150px;
    height: 200px;
    padding-right: 25px;
    border-radius: 25px;
    z-index: 0;
}

#imageBorder{
    position: absolute;
    float: left;
    width: 150px;
    height: 200px;
    border-radius: 25px;
    box-shadow: 0px 2px 50px 10px #757575 inset;
    z-index: 1;
}

#imageHolder img{
    border-radius: 25px;
    width: 150px;
}

#content p{
    text-align: justify;
}

.example{
    position: relative;
    display: inline-block;
    float: left;
    margin: 25px;
    width: 110px;
    height: 145px;
    font-size: 0.5em;
    z-index: 0;
}

.example img{
    position: relative;
    float: left;
    display: block;
    width: 100%;
    height: 75%;
}

.example p{
    position: relative;
    float: left;
    display: block;
    cursor: pointer;
}

#popup{
    position: absolute;
    display: none;
    top: 10%;
    left: 25%;
    right: 25%;
    bottom: 10%;
    background-color: #757575;
    border-radius: 25px;
    box-shadow: 15px 15px 25px #000000;
    z-index: 10;
}

#mask{
    position: absolute;
    display: none;
    top: -68px;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #FFFFFF;
    opacity: 0.75;
    z-index: 9;
}

.popImgHolder{
    position: absolute;
    top: 0;
    left: 25%;
    width: 50%;
    height: 45%;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
}

.popImgHolder img{
    width: 100%;
    height: 100%;
    border-radius: 25px;
}

.popTxtHolder{
    position: absolute;
    top: 45%;
    left: 0;
    width: 100%;
    height: 55%;
    text-align: justify;
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;
}

.popTxtHolder p{
    font-size: 1.15em;
    padding-left: 25px;
    padding-right: 25px;
}

.description{
    display: none;
}

JAVASCRIPT 

$(document).ready(function(){
    $('#wrapper').append('<div id="mask"></div>');
    $('#wrapper').append('<div id="popup"><div class="popImgHolder"></div><div class="popTxtHolder"></div></div>');
    $('.example').append('<p>Click here to read about my experience<p>');

    $("html").niceScroll();
    var popTxtHolder = $('.popTxtHolder');

    $('.example p').on('click', function(){
        var text = $(this).prev('.description').find('p');
        var images = $(this).parents('.example').find('img:first-child');
        images.clone().appendTo('.popImgHolder');
        text.clone().appendTo('.popTxtHolder');
        $('#popup, #mask').show();
        popTxtHolder.niceScroll({cursorwidth: '2px'});
    })

    $('#popup, #mask').click(function(){
        $('#popup, #mask').hide();
        $('.popTxtHolder, .popImgHolder').children().remove();
    })

    $('.mainMenu li').on('mouseover', function(){
        $('.subMenu').show();
        $(this).on('mouseout', function(){
            $('.subMenu').hide();
        })
    })
})

1 個解決方案

解決方案1
 0  

看這個演示

我是創作者，不需要js
的HTML： 

<body>
    <ul class="menu">
        <li><a href="#">My Dashboard</a>

            <ul>
                <li><a href="#" class="learn">Learn</a>

                </li>
                <li><a href="#" class="teach">Teach</a>

                </li>
                <li><a href="#" class="Mylibrary">My Library</a>
                </li>
            </ul>
        </li>
        <li><a href="#">Likes</a>

            <ul>
                <li><a href="#" class="Pics">Pictures</a>

                </li>
                <li><a href="#" class="audio">Audio</a>

                </li>
                <li><a href="#" class="Videos">Videos</a>

                </li>
            </ul>
        </li>
        <li><a href="#">Views</a>

            <ul>
                <li><a href="#" class="documents">Documents</a>

                </li>
                <li><a href="#" class="messages">Messages</a>

                </li>
                <li><a href="#" class="signout">Videos</a>

                </li>
            </ul>
        </li>
        <li><a href="#">account</a>

            <ul>
                <li><a href="#" class="SI">Sign In</a>

                </li>
                <li><a href="#" class="Reg">Register</a>

                </li>
                <li><a href="#" class="Deactivate">Deactivate</a>

                </li>
            </ul>
        </li>
        <li><a href="#">Uploads</a>

            <ul>
                <li><a href="#" class="Pics">Pictures</a>

                </li>
                <li><a href="#" class="audio">Audio</a>

                </li>
                <li><a href="#" class="Videos">Videos</a>

                </li>
            </ul>
        </li>
        <li><a href="#">Videos</a>

            <ul>
                <li><a href="#" class="Add">Add</a>

                </li>
                <li><a href="#" class="delete">Delete</a>

                </li>
            </ul>
        </li>
        <li><a href="#">Documents</a>

            <ul>
                <li><a href="#" class="Add">Upload</a>

                </li>
                <li><a href="#" class="delete">Download</a>

                </li>
            </ul>
        </li>
    </ul>
</body>

CSS： 

.menu, .menu ul, .menu li, .menu a {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
}
body {
    max-width:110%;
    margin-left:0;
}
.menu {
    height: 40px;
    width:110%;
    margin-left:-4px;
    margin-top:-10px;
    background: #4c4e5a;
    background: -webkit-linear-gradient(top, #4c4e5a 0%, #2c2d33 100%);
    background: -moz-linear-gradient(top, #4c4e5a 0%, #2c2d33 100%);
    background: -o-linear-gradient(top, #4c4e5a 0%, #2c2d33 100%);
    background: -ms-linear-gradient(top, #4c4e5a 0%, #2c2d33 100%);
    background: linear-gradient(top, #4c4e5a 0%, #2c2d33 100%);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
.menu li {
    position: relative;
    list-style: none;
    float: left;
    display: block;
    height: 40px;
}
.menu li a {
    display: block;
    padding: 0 14px;
    margin: 6px 0;
    line-height: 28px;
    text-decoration: none;
    border-left: 1px solid #393942;
    border-right: 1px solid #4f5058;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 13px;
    color: #f3f3f3;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .6);
    -webkit-transition: color .2s ease-in-out;
    -moz-transition: color .2s ease-in-out;
    -o-transition: color .2s ease-in-out;
    -ms-transition: color .2s ease-in-out;
    transition: color .2s ease-in-out;
}
.menu li:first-child a {
    border-left: none;
}
.menu li:last-child a {
    border-right: none;
}
.menu li:hover > a {
    color: #8fde62;
}
.menu ul {
    position: absolute;
    top: 40px;
    left: 0;
    opacity: 0;
    background: #1f2024;
    -webkit-border-radius: 0 0 5px 5px;
    -moz-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
    -webkit-transition: opacity .25s ease .1s;
    -moz-transition: opacity .25s ease .1s;
    -o-transition: opacity .25s ease .1s;
    -ms-transition: opacity .25s ease .1s;
    transition: opacity .25s ease .1s;
}
.menu li:hover > ul {
    opacity: 1;
}
.menu ul li {
    height: 0;
    overflow: hidden;
    padding: 0;
    -webkit-transition: height .25s ease .1s;
    -moz-transition: height .25s ease .1s;
    -o-transition: height .25s ease .1s;
    -ms-transition: height .25s ease .1s;
    transition: height .25s ease .1s;
}
.menu li:hover > ul li {
    height: 36px;
    overflow: visible;
    padding: 0;
}
.menu ul li a {
    width: 100px;
    padding: 4px 0 4px 40px;
    margin: 0;
    border: none;
    border-bottom: 1px solid #353539;
}
.menu ul li:last-child a {
    border: none;
}

根據需要調整標簽的大小，這很好

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 用css的jQuery下拉菜單 CSS下拉菜單未正確對齊 jQuery + CSS下拉菜單問題 jQuery 下拉菜單 CSS 操作 導航欄關閉的jQuery下拉菜單無法正常運行 jQuery：下拉菜單在移動設備上無法正常工作 定位jQuery下拉菜單，使其完全顯示在移動設備的屏幕上 垂直 CSS/jQuery 下拉菜單問題？ jQuery和CSS下拉菜單mouseleave並單擊 使用 javascript 或 jquery 在 html 和 css 中制作下拉菜單
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM