jQuery & CSS dropdown menu not stacking & positioning correctly
Question
I have a jQuery & css dropdown menu that I'm having issues with. The animation works perfectly on it. However, I'm not able to get it to position correctly. It won't adjust itself when the screen size changes. Another issue I'm having is that I've got the z-index set to stack 'on top' of everything else, yet it's not doing so. Can anyone help with these issues? The pen I'm including doesn't work correctly for some reason but I'll include it anyway. 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 answers
solution1
0
see this demo
im the creator, no js required
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;
}
resize tabs as much as you want, its good
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
jQuery dropdown menu with css
CSS DropDown Menu Not Aligned Correctly
Jquery + css dropdown menu issue
jQuery dropdown menu CSS manipulation
Jquery dropdown menu off navbar not functioning correctly
Jquery : Dropdown menu not working correctly on mobile devices
Positioning jQuery dropdown menu so that it displays completely on the screen on a mobile device
Vertical CSS / jQuery Dropdown menu issue?
Jquery and css dropdown menu mouseleave and click
Making dropdown menu in html & css with javascript or jquery
Related Tags