Menu
http://www.indofolio.com/, I'm trying to create a website with similar function to this one, but I don't understand how he did the horizontal scrolling with anchor tag without javascript. Turn javascript off, and his website is still functionning properly. I really love the progressive enhancement he did.
Test code for horizontal anchoring, take out inline-block and float left and it works perfectly.
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.ab {
width: 20%;
height: 20%;
float: left;
display: inline-block;
border: 1px solid red;
}
</style>
</head>
<body>
<a href="#box1">aaaaaaa</a>
<a href="#box2">bbbbbbb</a>
<div id="container" style="width:100%">
<ul style="width:500%;height:2000px;background-color:red">
<li class="ab"><a name="box1"></a>
<div>test</div>
</li>
<li class="ab"><a name="box2"></a>
<div>test2</div>
</li>
<li class="ab">
<a name="box3"></a>
<div>test3</div>
</li>
<li class="ab">
<div></div>
</li>
<li class="ab">
<div></div>
</li>
</ul>
</div>
</body>
</html>
587
Like Quentin said, but his explanation might be a bit lacking if you are new to web design. With javascript off, note that the url in changes. The homepage is www.indofolio.com/#box1 the next has #box2, etc. Those are id's of the content boxes that he is using. Normal behavior for an a tag is to "jump" to those points if they exist on a page and the anchor is set to do so. His home page anchor is <a class="link home selected" href="#box1">Home</a> where the href is what causes the jump to that location.
EDIT: Here's some reworked code for your example.
HTML
<div id="nav">
<a href="#box1">B1</a>
<a href="#box2">B2</a>
<a href="#box3">B3</a>
<a href="#box4">B4</a>
<a href="#box5">B5</a>
</div>
<div id="container">
<ul>
<li class="ab" id="box1">
<div>test1</div>
</li>
<li class="ab" id="box2">
<div>test2</div>
</li>
<li class="ab" id="box3">
<div>test3</div>
</li>
<li class="ab" id="box4">
<div>test4</div>
</li>
<li class="ab" id="box5">
<div>test5</div>
</li>
</ul>
</div>
CSS
body {
padding: 0;
margin: 0;
}
.ab {
width: 20%;
float: left;
padding: 0;
margin: 0;
}
.ab div {
height: 500px;
border: 1px solid red;
}
#container {
width: 500%; /* five page widths for five horizontal pages */
padding: 0;
margin: 1.5em 0 0;
}
#container ul {
width: 100%;
list-style: none;
padding: 0;
margin: 0;
}
#nav {
position: fixed;
left: 0;
top: 0;
}
#nav a {
margin-right: 10px;
display: inline-block;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
