Setinha in menu with CSS and that appears when clicked

Question

Setinha in menu with CSS and that appears when clicked

Navigation

#1 by (1 votes)

-2

I'm trying to do almost the same thing that was described in this other question: Setinha em menu with just CSS .

But with one small difference: when you click the button that is marked as selected. That shows that she is in that page, but together with the highlighted arrow.

Andhowareyounow,andIwantyoutostayinthatotherimage,thatthearrowisinthemiddle,andIdonothowtodothat.

Code

nava{text-decoration:none;padding:8px8px8px8px;color:#ffffff;position:relative;}nava:hover:before{width:0;height:0;border:10pxsolidtransparent;border-top-color:#888888;content:""; 
    bottom: -20px; 
    position: absolute; 
}

css

asked by anonymous 26.01.2016 / 20:17

1 answer

How to send names from a php loop to another input using JS How do I send an email? [closed]

score 1 · Answer 1

First, you have to have a CSS of this:

.dropdown.current {
    width: 0;
    height: 0;
    position: absolute;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid red;
    bottom: -10px;
    left: 20%;
}

Then in each LINK row you put tag class="dropdown" if to check if it is on this page, if yes you apply class='current' .

Are you using any server-side language, like PHP, or just HTML, CSS, and JS?

The if can be done in a JS or PHP code.

In your CSS below, put the following properties:

left: 0; 
right: 0;
margin: auto;

So:

nav a:hover:before{ 
    width: 0; 
    height: 0; 
    border: 10px solid transparent; 
    border-top-color: #888888; 
    content: ""; 
    bottom: -20px; 
    position: absolute; 
    left: 0; 
    right: 0;
    margin: auto;
}