You will be creating a button menu that has a hover state and also allows you to select a button when you click on it. The final project can be seen in this Codepen.
Step 1
Setup a project on your local computer and then open it in your code editor. In the root folder create files for index.html styles.css and index.js
Step 2
Copy and paste the code into their corresponding files
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Button Menu</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<main>
<div class="menu">
<button class="btn-menu selected">One</button>
<button class="btn-menu">Two</button>
<button class="btn-menu">Three</button>
<button class="btn-menu">Four</button>
<button class="btn-menu">Five</button>
</div>
</main>
<script src="index.js"></script>
</body>
</html>
styles.css
@import url('https://fonts.googleapis.com/css2?family=Asap+Condensed:wght@400;700&display=swap');
:root {
--main-bg: #EEEEEE;
--menu-bg: #17C0EB;
--menu-font-color: #FFFFFF;
--menu-border: #25d3ff;
--menu-bg-selected: #333333;
--menu-bg-hover: #52dcff;
--menu-bg-selected-chevron: #3cac1a;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 62.5%;
}
body {
font-size: 1.6rem;
font-family: 'Asap Condensed', sans-serif;
background: var(--main-bg);
}
main {
margin: 5rem auto;
}
.menu {
margin: 0 auto;
display: flex;
flex-flow: column wrap;
width: 80rem;
max-width: 100%;
border-radius: 2rem;
background: var(--menu-bg);
}
.btn-menu {
position: relative;
cursor: pointer;
background: var(--menu-bg);
border: none;
padding: 2rem;
color: var(--menu-font-color);
font-weight: 700;
border-top: 0.1rem solid var(--menu-border);
border-bottom: 0.1rem solid var(--menu-border);
transition: background 1s;
}
.btn-menu:hover {
background: var(--menu-bg-hover);
}
.btn-menu:focus {
outline: none;
box-shadow: none;
}
.selected {
background: var(--menu-bg-selected);
}
.selected::before {
position: absolute;
left: 0;
top: 0;
content: "";
background: var(--menu-bg-selected-chevron);
height: 5.6rem;
width: 0.5rem;
}
index.js
const btnMenu = Array.from(document.querySelectorAll('.btn-menu'));
btnMenu.forEach((btns) => {
btns.addEventListener('click', () => {
btnMenu.forEach((btns) => {
btns.classList.remove('selected');
});
btns.classList.add('selected');
});
});
Step 3
Open the index.html file in a web browser or if you are using Visual Studio Code you can use the Live Server extension to make it run on a server.
Top comments (4)
Nice, but if I could make one small suggestion, it would be to add a background color to the
:focusstate since if I'm usingtabI cannot see which button I'm currently on. 🤔Other than that small suggestion, really like the menu. 👍 🔥
I tested your code it works however it appears to behave differently depending on the browser.
Chrome: Tabbing works however the background colour keeps the focus colour on the selected button unless you click somewhere on the page a second time.
Firefox: Tabbing seems to work properly
Safari: I don't know if the browser supports tabbing? I could only get it to go to the search bar?
Tabbing on safari works just fine for me might have something to do with the OS and accessibility settings, I've messed around with mine a bit, might've toggled something on or off that makes it work for me, haven't tested it with the native macOS VoiceOver but I know buttons have built-in roles that get read out, mainly mentioned it for visual indication, it's a good practice to keep in mind. 🙂
Good one. Thanks for sharing 😄