Search code examples
javascriptcssnavigationsliderhtml4

Website navigations and sliders

Is there a way in HTML4 to have your site navigation link to different sliders on the page.

Meaning if i have a navigatio:

Catagory 1 | Catagory 2 | Catagory 3 | Catagory 4

is there a way where if a click on Catagory 1, a slider of videos will come up below pertaining to catagory 1. same for catagory 2 and so on and so forth.

Solution

  • Depends on how you want to do this exactly, but here's an option:

    Basically we have a nav bar with four links, each linking to an anchor:

    <div class='nav'>
<a href="#1">1</a> | <a href="#2">2</a> | <a href="#3">3</a> | <a href="#4">4</a>
</div>

    Then we have a container that contains four divs - each with an id relating to the anchor links in the nav bar:

    <div class='container'>
   <div class='container1' id="1">
   Container 1
   </div>
   <div class='container2' id="2">
   Container 2
   </div>
   <div class='container3' id="3">
   Container 3
   </div>
   <div class='container4' id="4">
   Container 4
   </div>
</div>

    Then some CSS. Some of this is just for styling purposes, but you essentially want to make your container 100% wide, with hidden x overflow. Then, each containing div (1-4) should be set absolutely, with an offset of 100% each time.

    .nav {
  width:100%;
  font-family: Arial;
  font-size: 15pt;
  text-align: center;
  margin-bottom: 20px;
}
.container {
  font-family: Arial;
  font-size: 30pt;
  width:100%;
  background: black;
  height: 400px;
  position: relative;
  overflow-x: hidden;
}
.container1 {
  text-align: center;
  position: absolute;
  color: white;
  height:400px;
  display: inline-block;
  width:100%;
}
.container2 {
  text-align: center;
  left: 100%;
  position: absolute;
  color: white;
  height:400px;
  display: inline-block;
  width:100%;
}
.container3 {
  text-align: center;
  left: 200%;
  position: absolute;
  color: white;
  height:400px;
  display: inline-block;
  width:100%;
}
.container4 {
  text-align: center;
  left: 300%;
  position: absolute;
  color: white;
  height:400px;
  display: inline-block;
  width:100%;
}

    In practice:

    https://jsfiddle.net/9rfdyw27/

    There are much tidier ways to do this, but I've thrown it together to at least give you an idea of where you can go with this. You really don't need JS unless you want to make it look a bit more swish with the transition from link to link.