Menu
HTML part
[CODE]
<!DOCTYPE html>
<head>
<link rel=”stylesheet” href=”slidertextstyle.css” type=”text/css”>
</head>
<body>
<div class=”slider-holder”>
<span id=”slider-text-1″></span>
<span id=”slider-text-2″></span>
<span id=”slider-text-3″></span>
<div class=”text-holder”>
<div id=”texta”><h1>TEXT1</h1></div>
<div id=”textb”><h1>TEXT2</h1></div>
<div id=”textc”><h1>TEXT3</h1></div>
</div>
<div class=”button-holder”>
<a href=”#slider-text-1″ class=”slider-change”></a>
<a href=”#slider-text-2″ class=”slider-change”></a>
<a href=”#slider-text-3″ class=”slider-change”></a>
</div>
</div>
</body>
</html>
css part
[CODE]
.slider-holder{
width: 300px;
height: 200px;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
background-color: #FFFFEB;
overflow: hidden;
border: 6px solid black;
}
#texta {
float: left;
width: 300px;
height: 200px;
background-color: #FFB2B2;
text-align: center;
}
#textb {
float: left;
width: 300px;
height: 200px;
background-color: #6699FF;
text-align: center;
}
#textc {
float: left;
width: 300px;
height: 200px;
background-color: #B2F0D1;
text-align: center;
}
h1{
color: azure;
}
.text-holder{
min-width: 910px;
height: 200px;
clear: both;
background: #D6AD99;
position: relative;
transition: left 2s;
}
.slider-text{
float: left;
margin: 0;
padding: 0;
position: relative;
}
#slider-text-1:target ~ .text-holder{
left:0;
}
#slider-text-2:target ~ .text-holder{
left:-300px;
}
#slider-text-3:target ~ .text-holder{
left:-600px;
}
.button-holder{
position: relative;
text-align: center;
top:-40px;
}
.slider-change{
display: inline-block;
height: 10px;
width: 10px;
border-radius: 5px;
background-color: black;
}