We have designed a unique web layout that is centered horizontally and includes an animated scrolling effect. There are 5 menu options that use simple anchor links to navigate between different pages. Our layout features static content with only the body section sliding when navigating. The desired effect is a smooth transition from one page to another, where clicking on each menu item triggers a sliding motion to the corresponding content. However, we have encountered some issues with the functionality.
We incorporated code snippets from other websites for certain CSS and jQuery elements. Unfortunately, sometimes when clicking on a menu item, the action does not execute properly. It either fails to display the correct slide or slides in the opposite direction, leaving us puzzled and searching for a solution.
HTML
<body>
<div id="menu">
<ul>
<li><a href="#menu1">Page 1</a></li>
<li><a href="#menu2">Page 2</a></li>
<li><a href="#menu3">Page 3</a></li>
<li><a href="#menu4">Page 4</a></li>
<li><a href="#menu5">Page 5</a></li>
</ul>
</div>
<div align="center" id="body">
<div id="body_wrapper">
<div class="body_content_content" id="menu1">menu1 page content</div>
<div class="body_content_content" id="menu2">menu2 page content</div>
<div class="body_content_content" id="menu3">menu3 page content</div>
<div class="body_content_content" id="menu4">menu4 page content</div>
<div class="body_content_content" id="menu5">menu5 page content</div>
</div>
</div>
</body>
CSS
#menu ul li {
display:inline;
}
#body {
width:100%;
height:200px;
margin:auto;
position:relative;
border: 0px solid red;
overflow:hidden;
top:100px;
}
#body_wrapper {
float:left;
width:500%;
padding:0;
margin:0;
height: 200px;
}
.body_content_content {
float:left;
width:20%;
height:200px;
#margin:10px 0;
position:relative;
}
.body_content_content div:first {
width:900px;
padding:20px;
margin:auto;
float:none;
}
JQUERY
$('a[href^="#"]').on('click',function(event){
var $anchor = $(this);
$('#body').stop().animate({
scrollLeft: $($anchor.attr('href')).offset().left
}, 1000);
event.preventDefault();
});
>> Visit the Web site
In the fiddle, you can set CSS overflow:display; in the #body ID to see a normal div with 5 consecutive divs enclosed within it.
We appreciate any assistance you can provide. Thank you.