Question

I want to do a menu for my website like this with the transition in each section. I want the red bar move along I click on other sections.

http://piccsy.com/investors/

What is the best way to do that?

I have also tried to do it myself but it doesn’t work.

http://alpha.venasanxenxo.com/piccsy

Answer 1

Do you want to achieve the same effect using just CSS3? That menu uses JavaScript. There is no CSS way (yet… it should come with CSS4) to change the CSS of an element by clicking an element that isn’t its sibling or it’s parent.

It is possible, however, to achieve the same effect for the bar (for smooth scrolling you need to use JavaScript). But not with that HTML structure.

I’ve tried a couple of things:

1. This http://dabblet.com/gist/3155730 does it with links, but whenever you click elsewhere on the page (not on the links) the effect disappears.

The idea in this case is to have a gradient on that element below and to change its size when clicking the links. Do note that the HTML is different, so that the element below can be a sibling of the links.

<div class="ui-menu">
    <a class="goto-frame" href="#" tabindex="1">Welcome
        </a><a class="goto-frame" href="#" tabindex="1">Problem
        </a><a class="goto-frame" href="#solution" tabindex="1">Solution
        </a><a class="goto-frame" href="#team" tabindex="1">Team
        </a><a class="goto-frame" href="#traction" tabindex="1">Traction
    </a><a class="goto-frame" href="#product" tabindex="1">Product
        </a><a class="goto-frame" href="#contact" tabindex="1">Contact</a>
    <div class="ui-menu-bottom-line"></div>
</div>

The formatting of the HTML does serve a purpose: I’ve made the links inline-block so I cannot have any kind of white space between the closing tag </a> and the next opening tag <a class="goto-frame">.

The CSS:

.ui-menu {
    width: 37em;
    padding: 0;
    text-align: center;
}
.ui-menu a {
    width: 4em;
    margin: 0;
    padding: .1em .5em;
    display: inline-block;
    font: 17px "Arial Narrow", sans-serif;
    text-align: center;
    text-decoration: none;
}
.ui-menu a:focus {
    outline: none;
}
.ui-menu-bottom-line {
    width: 35em;
    height: 1px;
    margin: 1em auto;
    background: #d7d7d7
        linear-gradient(left, #d82126 50%, transparent 50%) no-repeat;
    background-size: 5em;
    transition: 1s; 
}
.ui-menu a:nth-child(2):focus ~ .ui-menu-bottom-line,
.ui-menu a:nth-child(2):active ~ .ui-menu-bottom-line {
    background-size: 15em;
}
.ui-menu a:nth-child(3):focus ~ .ui-menu-bottom-line,
.ui-menu a:nth-child(3):active ~ .ui-menu-bottom-line {
    background-size: 25em;
}
/* and so on, I keep adding 10em with every new menu item */

Works in Chrome, Firefox, Safari, Opera, IE10 as gradients don’t work in IE9 and older (and neither do transitions).

Could be made to work in IE9 and 8 and older by using a pseudo-element on .ui-menu-bottom-line, setting its background dark red and then changing its width on click (instead of changing the background gradient size).

---

2. This http://dabblet.com/gist/3155740 works as required even after releasing the mouse button, but it does not use links.

HTML

<div class="ui-menu">
    <input type="radio" name="mi" id="welcome">
    <label class="goto-frame" for="welcome">Welcome</label>
    <input type="radio" name="mi" id="problem">
    <label class="goto-frame" for="problem">Problem</label>
    <input type="radio" name="mi" id="solution">
    <label class="goto-frame" for="solution">Solution</label>
    <input type="radio" name="mi" id="team">
    <label class="goto-frame" for="team">Team</label>
    <input type="radio" name="mi" id="traction">
    <label class="goto-frame" for="traction">Traction</label>
    <input type="radio" name="mi" id="product">
    <label class="goto-frame" for="product">Product</label>
    <input type="radio" name="mi" id="contact">
    <label class="goto-frame" for="contact">Contact</label>
    <div class="ui-menu-bottom-line"></div>
</div>

CSS – same idea, only this time I’m not clicking links – I’m checking radio buttons instead

.ui-menu {
    width: 37em;
    padding: 0;
    font: 17px "Arial Narrow", sans-serif;
    text-align: center;
}
.ui-menu input[type=radio] { display: none; }
.ui-menu label {
    width: 4em;
    margin: 0;
    padding: .1em .5em;
    display: inline-block;
    text-align: center;
}
.ui-menu-bottom-line {
    width: 35em;
    height: 1px;
    margin: 1em auto;
    background: #d7d7d7
        linear-gradient(left, #d82126 50%, transparent 50%) no-repeat;
    background-size: 5em;
    transition: 1s;
}
.ui-menu #welcome:checked ~ .ui-menu-bottom-line {
    background-size: 5em;
}
.ui-menu #problem:checked ~ .ui-menu-bottom-line {
    background-size: 15em;
}
/* and so on, add 10em to the bg size for each new menu item */