CODEWITHSUNDEEP
htmlcss
Joey
Joey

Reputation: 63

Make an active menu

I have a menu that show an arrow below when you hover it but I want it to show the arrow too when you press on it.

Here is the code in codepen:https://codepen.io/ouchie/pen/gMMegZ

HTML

<div id="menu">
        <ul>
            <li><a href="index.html"><img src="Image/home-128.png" width="27" height="27" id="menu-img" />Startseite</a></li>
            <li><a href="Pages/Anfahrt.html"><img src="Image/Map.png" width="27" height="27" id="menu-img" />Anfahrt</a></li>
            <li><a href="Pages/Kontakt.html"><img src="Image/Contact.png" width="27" height="27" id="menu-img" />Kontakt</a></li>
            <li><a href="Pages/Speisekarte.html"><img src="Image/Menu.png" width="27" height="27" id="menu-img" />Speisekarte</a></li>
            <li><a href="Pages/Galerie.html"><img src="Image/Gallery.png" width="27" height="27" id="menu-img" />Galerie</a></li>

        </ul>
    </div>

This is the CSS that I used. I did not made this but I found it on the internet

CSS

#menu {
position:relative;
list-style:none;
float:left;
width:800px;
height:60px;
text-align:center;
}

#menu li {
float:left;
text-decoration:none;
display:block;
font-family:Franklin Gothic Heavy, Gadget, sans-serif;
height:50px;
text-align:center;
line-height:50px;
}

#menu ul{
display:inline-block;
list-style-type: none;
}

#menu li a {
position:relative;
display:inline;
padding:11px 27px;
overflow:hidden;
text-decoration:none;
text-align:center;
font-family:'Lucida Sans Unicode','Lucida Grande','Lucida Sans','DejaVu Sans Condensed',sans-serif;
text-transform:capitalize;
font-weight:bold;
color:#000;
border-bottom:7px solid #959393;
background:#979393;
background-image: -webkit-linear-gradient(top, #ffffff, #EDF1F2);
background-image: -moz-linear-gradient(top, #ffffff, #EDF1F2);
background-image: -ms-linear-gradient(top, #ffffff, #EDF1F2);
background-image: -o-linear-gradient(top, #ffffff, #EDF1F2);
background-image: linear-gradient(to bottom, #ffffff, #EDF1F2);
-moz-transition:all 0.25s ease;
-webkit-transition:all 0.25s ease;
-o-transition:all 0.25s ease;
transition:all 0.25s ease;
opacity:0.68;
}

#menu li:nth-child(2n-1) a:hover {
border-bottom-color:#FF0000;
}

#menu li:nth-child(2n) a:hover {
border-bottom-color:#FF0000;
}

#menu li:nth-child(2n-1) a:hover::before {
position:absolute;
content:'';
width:0;
height:0;
border-left:11.5px solid  transparent;
border-right:11.5px solid transparent;
border-bottom:11.5px solid #FF0000;
right:45%;
bottom:0;
}

#menu li:nth-child(2n) a:hover::before {
position:absolute;
content:'';
width:0;
height:0;
border-left:11.5px solid  transparent;
border-right:11.5px solid transparent;
border-bottom:11.5px solid #FF0000;
right:45%;
bottom:0;
}

#menu li a:hover {
color:#FF0000;
text-shadow:inset 0 0 8px 0 red;
-moz-transition:all 0.25s ease;
-webkit-transition:all 0.25s ease;
-o-transition:all 0.25s ease;
transition:all 0.25s ease;
}

Upvotes: 2

Views: 97

Answers (2)

Maharajan
Maharajan

Reputation: 188

Try this. It will work for an index page. You have to slightly change it for another page.

HTML:

<div id="menu">
    <ul>
        <li><a href="index.html"><img src="Image/home-128.png" width="27" height="27" id="menu-img" />Startseite</a></li>
        <li><a href="Pages/Anfahrt.html"><img src="Image/Map.png" width="27" height="27" id="menu-img" />Anfahrt</a></li>
        <li><a href="Pages/Kontakt.html"><img src="Image/Contact.png" width="27" height="27" id="menu-img" />Kontakt</a></li>
        <li><a href="Pages/Speisekarte.html"><img src="Image/Menu.png" width="27" height="27" id="menu-img" />Speisekarte</a></li>
        <li><a href="Pages/Galerie.html"><img src="Image/Gallery.png" width="27" height="27" id="menu-img" />Galerie</a></li>
    </ul>
</div>

CSS:

#menu {
    position: relative;
    list-style: none;
    float: left;
    width: 800px;
    height: 60px;
    text-align: center;
}

#menu li {
    float: left;
    text-decoration: none;
    display: block;
    font-family: Franklin Gothic Heavy, Gadget, sans-serif;
    height: 50px;
    text-align: center;
    line-height: 50px;
}

#menu ul {
    display: inline-block;
    list-style-type: none;
}

#menu li a {
    position: relative;
    display: inline;
    padding: 11px 27px;
    overflow: hidden;
    text-decoration: none;
    text-align: center;
    font-family: 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', 'DejaVu Sans Condensed', sans-serif;
    text-transform: capitalize;
    font-weight: bold;
    color: #000;
    border-bottom: 7px solid #959393;
    background: #979393;
    background-image: -webkit-linear-gradient(top, #ffffff, #EDF1F2);
    background-image: -moz-linear-gradient(top, #ffffff, #EDF1F2);
    background-image: -ms-linear-gradient(top, #ffffff, #EDF1F2);
    background-image: -o-linear-gradient(top, #ffffff, #EDF1F2);
    background-image: linear-gradient(to bottom, #ffffff, #EDF1F2);
    -moz-transition: all 0.25s ease;
    -webkit-transition: all 0.25s ease;
    -o-transition: all 0.25s ease;
    transition: all 0.25s ease;
    opacity: 0.68;
}

#menu li:nth-child(2n-1) a:hover {
    border-bottom-color: #FF0000;
}

#menu li:nth-child(2n) a:hover {
    border-bottom-color: #FF0000;
}

#menu li:nth-child(2n-1) a:hover::before {
    position: absolute;
    content: '';
    width: 0;
    height: 0;
    border-left: 11.5px solid  transparent;
    border-right: 11.5px solid transparent;
    border-bottom: 11.5px solid #FF0000;
    right: 45%;
    bottom: 0;
}

#menu li:nth-child(2n) a:hover::before {
    position: absolute;
    content: '';
    width: 0;
    height: 0;
    border-left: 11.5px solid  transparent;
    border-right: 11.5px solid transparent;
    border-bottom: 11.5px solid #FF0000;
    right: 45%;
    bottom: 0;
}

#menu li a:hover {
    color: #FF0000;
    text-shadow: inset 0 0 8px 0 red;
    -moz-transition: all 0.25s ease;
    -webkit-transition: all 0.25s ease;
    -o-transition: all 0.25s ease;
    transition: all 0.25s ease;
}
#menu li a.active {
    color: #FF0000;
    text-shadow: inset 0 0 8px 0 red;
    -moz-transition: all 0.25s ease;
    -webkit-transition: all 0.25s ease;
    -o-transition: all 0.25s ease;
    transition: all 0.25s ease;
}
#menu li a.active {
    border-bottom-color: #FF0000;
}
#menu li a.active::before {
    position: absolute;
    content: '';
    width: 0;
    height: 0;
    border-left: 11.5px solid  transparent;
    border-right: 11.5px solid transparent;
    border-bottom: 11.5px solid #FF0000;
    right: 45%;
    bottom: 0;
}

JavaScript (jQuery):

var URL = window.location.pathname; // Gets page name
var page = URL.substring(URL.lastIndexOf('/') + 1);  
console.log(page);
$('#menu ul li  a').each(function() {
    if($(this).attr('href') == page) {
        alert('hi');
        $(this).addClass('active');
    }
});

Demo (CodePen)

Upvotes: 1

Arathi Sreekumar
Arathi Sreekumar

Reputation: 2574

You can add :focus and :active pseudo classes everywhere you have hover. Also if you are on a page and want the corresponding link selected, then use logic to add a current class, which should also have the same css as hover.

eg:

Before:

#menu li:nth-child(2n-1) a:hover::before { ... }

After:

#menu li:nth-child(2n-1) a:hover::before,
#menu li:nth-child(2n-1) a:focus::before
#menu li:nth-child(2n-1) :target::before { ... }

See my codepen example: https://codepen.io/anon/pen/gMMeoE

You will have to programmatically add the current class to your currently active menu item.

Upvotes: 1

Related Questions