i have in my html this layout that i want the list items to hidden and when i hover then they transit ease-in. now the transition is pushing down my main content which i dont want. i want to have iit stay put whiles the nav does its transitions.
my structure is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<title>
</title>
<style>
html, body {
margin:0;
padding:0;
background-image:url(../images/bgs/pgBackground.jpg);
background-attachment: fixed;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.mainEnvelope {
width:100%;
}
header {
width:100%;
min-height:5rem;
}
.pageNavContainer {
display: -webkit-flex;
display: flex;
flex-direction: row;
}
nav {
width: 15%;
background:rgba(255, 0, 0, 1);
text-decoration: none;
font-variant: small-caps;
color: #fff;
max-height: 3rem;
overflow: hidden;
-webkit-transition: all .2s ease-in 0s;
-moz-transition: all .2s ease-in 0s;
-ms-transition: all .2s ease-in 0s;
-o-transition: all .2s ease-in 0s;
transition: all .2s ease-in 0s;
}
.decorationOnly {
background:rgba(0, 0, 0, 1);
max-height: 3rem;
flex: 1 1 80%;
margin-left: 5px;
}
nav:hover {
max-height: 1000px;
}
#mainWrapper {
max-width: 65%;
margin: 0 auto;
display: -webkit-flex;
display: flex;
flex-direction:row nowrap;
padding: 10px;
border-radius:12px;
background: #fff;
min-height: 700px;
/* margin-top: -20px;*/
}
</style>
</head>
<body>
<div class="mainEnvelope">
<header>Header</header>
<div class="pageNavContainer"><nav>
<h3> <img src="../images/bgs/Down.ico" style="width:27px; height:28px;float:left; margin-right:.5em;">Navigation </h3>
<ul class="transitMenu">
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Programs</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Gallery</a></li>
</ul>
</nav>
<nav class="decorationOnly">52</nav></div>
<!-- End of navigattion elements
the last nav with class='decorationOnly" is just a decoration to get a lengthy red behind the main text at the top-->
<section id="mainWrapper">
<main>main content</main>
<aside>aside</aside>
<footer>Footer</footer>
</section>
</div>
</body>
</html>
this is mu layout: what i want is that the navigation should not push down the main content area. here when i hovered over the navigation and the content is pushed down.
Note: the header and nav are in a separate container that is displayed flex.
hi SamA74 regarding this topic i have realise the element i have below the nav element hav stuch on top of the nav and no amount of margin will push it away.
the lay out is like this:
my problem is the mainPageContent sticking to the top of the navcontainer. i wanted to have stay at the middle of it so that its background can still be seen at the top. now the element below it is covered it. i will be posting the image and full code sooner. thanks for reading
Here is the image with the white area jumping up to the red div which wraps the nav element. i have made the nav about 12% width or so within its container. at the mooment its the container of the nav element that has the bottom element of it jump up.
Before you go any further, you need to validate your code.
Use either the url, a file upload or paste in the input as I have, which resulted in 12 errors and 7 warnings.
You will then need to work through and eliminate each error.
Your nav is absolutely placed and absolute elements are removed from the flow so any other content will not care that it is there. Therefore the middle section starts as high as it can because nothing is in the way. You should really have the navigation container as position:relative to preserve the space and then set the dropdown portion to position:absolute so that it doesn’t push content down.
Your red bar has been set to a max-height of 3rem which effectively means that the content in the middle is overflowing and will likely cause you considerable problems should you try to put anything under that middle section but not contained within in.
The red bar should be a separate element not a container for the middle content and should take up space in the flow as required. Then you can place your middle content underneath it assuming that is what you wanted.
I’d need to see a drawing of the result you are after to offer more specific advice
PaulOB i have removed the end div tag and placed it at its position, just above the main content div.
i have also positioned the parent div of the nav element relative and this caused the nav parent to shorten in lenght. it became same width as the nav element but the bottom element has now got back to its place. seeing i commented on the nav css and strangely the nav parent element went back to its original width which is 98.9% will post a picture in a minute
here is the result of turning my nav css code off after relative position of the parent of the nav and also placing the end div tag below the nav ending tag. Note i will post two images one with the css of nav on and the its turn off
the one below has this code turned off:
/*
}
nav {
box-shadow: 0 0 13px;
position: absolute;
top: ;
left: .1rem;
border:1px solid yellow;
width:15%;
max-height: 3rem;
overflow: hidden;
-webkit-transition: all .2s ease 0s;
-moz-transition: all .2s ease 0s;
-ms-transition: all .2s ease 0s;
-o-transition: all .2s ease 0s;
transition: all .2s ease 0s;
}
nav:hover {
max-height: 1000px;
}
*/
posting: