CODEWITHSUNDEEP
csspure-csstabmenu
pool matho
pool matho

Reputation: 39

Pure css default state override

I've been making a tab menu in a website. Pretty simple feature: every tab contains images and they appear only when the right tab is clicked. This is for an online course I'm taking and we're supposed to do this with css only. The problem I'm encountering is that I can't get the first tab to be displayed by default, if I do it won't disappear (the css wont override the display:block) and if it's hidden by default, I'm not respecting the demands of the course.

Here is how I did it:

CSS

#tabmenu > div {
  display: none;
}

#tabmenu > a {
  position:relative;
  left:35%;
  text-decoration: none;
  background-color: rgb(229,229,229);
  color: rgb(100,104,109);
  padding: 15px 15px 15px 15px;
  font-family: 'faw',sans-serif;
  margin:-3px -3px -3px -3px ;
  top:-50px;
}

#tabmenu > a:hover, #tabmenu > a:active {
  background-color: rgb(92,173,211);
  color: white;
  box-shadow: 0px 3px rgb(62,143,181);
}

#tabmenu > a:hover:after, #tabmenu > a:active:after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  border-top: 10px solid rgb(62,143,181);
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  transform: translateX(-50%);
}

#tous:target {
  display: block;
  position: relative;
  top:20px;
}

#sobres:target {
  display: block;
  position: relative;
  top: 20px;
}

#imaginatifs:target {
  display: block;
  position: relative;
  top: 20px;
}

#classiques:target {
  display: block;
  position: relative;
  top: 20px;
}

and in HTML

<div id="tabmenu" class="greyBg">
  <a href="#tous" class="sel">Tous</a>
  <a href="#sobres" class="sel">Sobres</a>
  <a href="#imaginatifs" class="sel">Imaginatifs</a>
  <a href="#classiques" class="sel">Classiques</a>

  <div id="tous">
    <div class="icontain">
      <div class="icaption">
        <img class="pico" src="images/ico/eye.png" alt="ico">
        <h3>Image 1</h3>
        <p>©WebAgency</p>
      </div>
      <img src="images/portfolio/01.jpg" alt="ico">
    </div>
  </div>

  <div id="sobres">
    <div class="icontain">
      <div class="icaption">
        <img class="pico" src="images/ico/eye.png" alt="ico">
        <h3>Image 5</h3>
        <p>©WebAgency</p>
      </div>
      <img src="images/portfolio/05.jpg" alt="ico">
    </div>
  </div>

</div><!-- #tabmenu -->

I only included two tabs and images but you get the idea (don't want this to be 5 pages long)

Anyway the #tous tab should be the one displayed by default, before the user clicks anything, and I just can't figure it out.

As I said, I have to do this in CSS only, I know JS and jQuery would solve this easily for me (and I'd love to do that).

Upvotes: 0

Views: 255

Answers (1)

Vijay Dev
Vijay Dev

Reputation: 1114

Since the way :target works, i:e it highlight the chosen item from hash part of the url, the only no JavaScript solution is to open you demo with such an url.

In your case, as an example: http://name.github.io/demo#tous. The url contains #tous by default. Hope this helps.

Upvotes: 0

Related Questions