I’m looking for this type of feature: when user clicks a link it will push down the web page and make an element appear from the top.
You can see something like this here. Click on the ‘More’ menu item.
Hi,
You can do that with jquery’s slide down quite easily.
Here’s a codepen:
Full code:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Untitled Document</title>
<style>
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
html, body, .wrap {
margin:0;
padding:0;
height:100%
}
html{overflow-y:scroll}
body {
background:#666
}
.wrap, .top {
width:100%;
max-width:980px;
margin:auto;
border:1px solid #000;
background:#ccc;
}
.wrap{display:table}
.top {
padding:10px;
}
h1 {
text-align:center;
padding:1em 0;
margin:0;
background:#fff;
border-bottom:2px solid #000;
position:relative;
}
.content {
padding:10px;
}
.more {
position:absolute;
left:10px;
top:10px;
font-weight:bold;
cursor:pointer;
color:blue;
font-size:1.5rem;
}
.more:hover{color:red;}
.more i {font-style:normal;}
.more b {display:none;}
.more.active i{display:none}
.more.active b{display:block}
</style>
</head>
<body>
<div id="top" class="top">
<p><strong>Something here:</strong></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean interdum luctus lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean convallis lacinia nisi. Praesent sed ipsum eu arcu malesuada pulvinar a ac est. Duis hendrerit lectus id sem gravida, ac posuere enim mattis. Phasellus lacinia lectus in facilisis egestas. Mauris tempus posuere metus, nec auctor sem feugiat sit amet. Sed imperdiet fringilla rutrum. Praesent quis lectus malesuada ipsum lobortis mattis quis at velit. Proin sed suscipit ligula, nec iaculis lacus. Pellentesque sapien sem, porttitor ut elit eget, rhoncus lacinia sapien. Mauris luctus vel ante vel iaculis. Etiam sapien purus, rutrum quis molestie nec, molestie id odio.</p>
</div>
<div class="wrap">
<h1>Page Header <span class="more"><i>More</i><b>Less</b></span></h1>
<div class="content">
<h2>Page content here</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean interdum luctus lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean convallis lacinia nisi. Praesent sed ipsum eu arcu malesuada pulvinar a ac est. Duis hendrerit lectus id sem gravida, ac posuere enim mattis. Phasellus lacinia lectus in facilisis egestas. Mauris tempus posuere metus, nec auctor sem feugiat sit amet. Sed imperdiet fringilla rutrum. Praesent quis lectus malesuada ipsum lobortis mattis quis at velit. Proin sed suscipit ligula, nec iaculis lacus. Pellentesque sapien sem, porttitor ut elit eget, rhoncus lacinia sapien. Mauris luctus vel ante vel iaculis. Etiam sapien purus, rutrum quis molestie nec, molestie id odio.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean interdum luctus lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean convallis lacinia nisi. Praesent sed ipsum eu arcu malesuada pulvinar a ac est. Duis hendrerit lectus id sem gravida, ac posuere enim mattis. Phasellus lacinia lectus in facilisis egestas. Mauris tempus posuere metus, nec auctor sem feugiat sit amet. Sed imperdiet fringilla rutrum. Praesent quis lectus malesuada ipsum lobortis mattis quis at velit. Proin sed suscipit ligula, nec iaculis lacus. Pellentesque sapien sem, porttitor ut elit eget, rhoncus lacinia sapien. Mauris luctus vel ante vel iaculis. Etiam sapien purus, rutrum quis molestie nec, molestie id odio.</p>
</div>
</div>
<script
src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
<script>
$(function() {
$('#top').hide();
$(".more").on("click", function(){
$(this).toggleClass('active');
$( "#top" ).slideToggle( "slow", function() {
// Animation complete.
});
});
});
</script>
</body>
</html>
It’s pretty straight forward but if you don’t understand anything just ask.
1 Like
That worked awesomely! A lot less code than what I’ve tried before.
But how would this work if I needed to put my header in ‘position: fixed’?
For example, if you look here, in order for me to get the header ‘push’ down after clicking ‘Log In’ the header needed to be in a ‘relative’ position. But I’m going to need that header to be in a fixed position as the user scrolls.
That doesn’t make sense?
If you make the header position:fixed then there the rest of the page won’t get pushed down and will be hidden behind the fixed element.
You are probably looking at 2 routines. One to push down the page and then a sticky header routine once the page has scrolled. Assuming you are talking about making the revealed element the fixed element?
Of course then you also lose the more/less button as that will slide under the fixed header and not be available until the page is scrolled all the way back to top so are you looking at making that fixed also?
I think you need to be clear about what you are asking for here?
After I wrote that, I figured this was a separate jQuery issue and posted it in a different part of the forum but didn’t edit the above message in time.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.