-var fonts= ["lato","raleway","arvo","roboto"]
-var items= ["Home","Bussiness","Science","Tech","Design"]
.select_font
h2 Choose your font family
ul.ff
each item in fonts
li(data-font=item,class=item)= item
ul(class=["one","nav"])
each item in items
li= item
ul(class=["two", "nav"])
each item in items
li= item
ul(class=["three", "nav"])
each item in items
li= item
ul(class=["four", "nav"])
each item in items
li= item
span.bg
ul(class=["five", "nav"])
each item in items
li= item
ul(class=["six","nav"])
each item in items
li= item
ul(class=["seven","nav"])
each item in items
li= item
ul(class=["eight","nav"])
each item in items
li= item
span.bg
ul(class=["nine","nav"])
each item in items
li= item
span.bg
ul(class=["ten","nav"])
each item in items
li= item
span.move_bg
View Compiled
@import url("https://fonts.googleapis.com/css?family=Roboto");
@import url("https://fonts.googleapis.com/css?family=Lato");
@import url("https://fonts.googleapis.com/css?family=Raleway");
@import url("https://fonts.googleapis.com/css?family=Arvo");
:root {
--main-font:'lato';
}
* {
box-sizing: border-box;
margin:0;
padding:0;
}
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
line-height: 1.7;
counter-reset: menu;
}
ul {
margin-bottom:15px;
}
.select_font h2 {
font-family: 'lato';
font-weight:100;
font-size: 32px;
text-align: center;
color: #222;
letter-spacing: 1px;
}
.select_font ul {
width:100%;
display: flex;
}
.select_font .ff li {
padding:0.5em 1.2em;
cursor: pointer;
border: 1px solid #479cff;
color: #479cff;
transition: background-color 0.5s;
font-weight: bold;
text-transform:capitalize;
margin-right:20px;
}
.select_font .ff li:hover {
background-color: #479cff;
color: #fff;
box-shadow: 0px 0px 0px 1px #479cff inset , 0px 0px 0px 2px #fff inset;
}
.select_font ul li.lato {
font-family: lato;
}
.select_font ul li.raleway {
font-family: raleway;
}
.select_font ul li.arvo {
font-family: arvo;
}
.select_font ul li.roboto {
font-family: "Roboto";
}
ul.nav::before {
counter-increment: menu;
content: counter(menu);
display: inline-block;
background-color: #595b69;
color: #eee;
font-size: 0.9em;
text-align: center;
margin: 0.25em;
border-radius: 2px;
width: 40px;
height: 40px;
line-height: 40px;
}
ul {
list-style: none;
}
.nav {
font-family: var(--main-font);
text-transform: capitalize;
}
ul.nav li {
display: inline-block;
padding: 0.8em 1.3em;
margin-right: 4px;
font-size: 0.9em;
letter-spacing: 1px;
color: #222;
background-image: linear-gradient(
to right,
rgb(50, 2, 142, 0.8),
rgb(43, 50, 200, 1)
);
background-repeat: no-repeat;
cursor: pointer;
transition: background-size 0.3s, color 0.5s;
}
.nav li:nth-child(2),
.nav li:nth-child(2) .bg {
background-image: linear-gradient(to right, #1488cc, #2b32b2);
}
.nav li:nth-child(3),
.nav li:nth-child(3) .bg {
background-image: linear-gradient(to right, #226aa8, #0072ff);
}
.nav li:nth-child(4),
.nav li:nth-child(4) .bg {
background-image: linear-gradient(to right, #e52d27, #b31217);
}
.nav li:last-child,
.nav li:last-child .bg {
background-image: linear-gradient(to right, #c0392b, #8e44ad);
}
/* first menu */
ul.one li {
background-position: 0% 50%;
background-size: 100% 0%;
}
/* second menu */
ul.two li {
background-position: 0% 100%;
background-size: 100% 1px;
}
/* third menu */
ul.three li {
background-position: 0% 100%;
background-size: 0px 100%;
}
/* fourth menu */
ul.nav.four li {
background-image: linear-gradient(transparent, transparent);
perspective: 500px;
position: relative;
z-index: 1;
}
ul.four li .bg {
display: inline-block;
position: absolute;
bottom: 0%;
left: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(
to right,
rgb(50, 2, 142, 0.8),
rgb(43, 50, 200, 1)
);
transform-origin: center bottom;
transform: rotateX(91deg);
transition: transform 0.5s;
z-index: -1;
}
/* fifth menu */
ul.five li {
color: #222;
background-clip: text;
background-size: 0px 100%;
background-position: 0% 100%;
transition: color 0.5s, background-size 0.8s;
}
/*sixth menu*/
ul.six li {
background-size: 0% 100%;
background-position: 0% 100%;
}
/* mouse hover sixth menu's item */
ul.six li.come {
background-size: 100% 100%;
color: #fff;
}
/* mouse leave sixth menu's item */
ul.six li.go {
background-position: 100% 100%;
background-size: 0% 100%;
}
/*seventh menu*/
ul.seven li {
background-position: 100% 0%;
background-size: 100% 0%;
}
/* mouse hover seventh menu's item */
ul.seven li.seven_come {
background-size: 100% 100%;
color: #fff;
}
/* mouse leave seventh menu's item */
ul.seven li.seven_go {
background-position: 100% 100%;
background-size: 100% 0%;
}
/*eighth menu & ninth menu */
ul.nav.eight li,
ul.nav.nine li {
background-image: linear-gradient(transparent, transparent);
perspective: 500px;
position: relative;
z-index: 1;
}
ul.eight li span,
ul.nine li span {
display: inline-block;
position: absolute;
bottom: 0%;
left: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(
to right,
rgb(50, 2, 142, 0.8),
rgb(43, 50, 200, 1)
);
transform-origin: center bottom;
transform: rotateX(91deg);
transition: all 0.5s;
z-index: -1;
}
/* tenth menu */
ul.nav.ten {
position: relative;
}
ul.nav.ten li {
background-image: none;
}
/* its background */
ul.nav.ten .move_bg {
display: inline-block;
position: absolute;
top: 0;
background-image: linear-gradient( to right, rgba(32, 86, 205, 0.8), rgb(194, 78, 250) );
z-index: -1;
transition: all 0.5s cubic-bezier(.18,.89,.32,1.28);
border-radius: 5px;
}
/**************************
HOVER
***************************/
ul.one li:hover,
ul.two li:hover,
ul.three li:hover,
ul.four li:hover {
background-size: 100% 100%;
color: #fff;
}
ul.four li:hover span {
transform: rotateX(0deg);
}
ul.five li:hover {
color: transparent;
background-size: 100% 100%;
}
ul.eight li:hover,
ul.nine li:hover {
color: #fff;
}
ul.eight li:hover span {
transform-origin: center center;
transform: rotateX(180deg);
}
ul.nine li:hover span {
transform-origin: center top;
transform: rotateX(0deg);
}
const root = document.documentElement;
let choose_font = document.querySelectorAll(".select_font .ff li");
choose_font.forEach(i => {
i.addEventListener("click", () => {
root.style.setProperty("--main-font",`${i.getAttribute("data-font")}`,null);
});
});
let six_items = document.querySelectorAll(".six li");
six_items.forEach(i => {
i.addEventListener("mouseenter", () => {
i.classList.add("come");
i.classList.remove("go");
i.addEventListener("mouseleave", () => {
i.classList.add("go");
i.classList.remove("come");
});
});
});
let seven_items = document.querySelectorAll(".seven li");
seven_items.forEach(i => {
i.addEventListener("mouseenter", () => {
i.classList.add("seven_come");
i.classList.remove("seven_go");
i.addEventListener("mouseleave", () => {
i.classList.add("seven_go");
i.classList.remove("seven_come");
});
});
});
let ten_items = document.querySelectorAll(".ten li"),
wrap_ten_items = document.querySelector(".ten"),
bg = document.querySelector(".move_bg");
ten_items.forEach(i => {
i.addEventListener("mouseenter", () => {
bg.style.opacity = "1";
i.style.color = "#000";
bg.style.width = `${i.offsetWidth}px`;
bg.style.height = `3px`;
bg.style.left = `${i.getBoundingClientRect().left -
wrap_ten_items.getBoundingClientRect().left}px`;
bg.style.top = `${i.getBoundingClientRect().top -
wrap_ten_items.getBoundingClientRect().top + i.offsetHeight}px`;
i.addEventListener("mouseleave", () => {
i.style.color = "#333";
});
wrap_ten_items.addEventListener("mouseleave", () => {
bg.style.opacity = "0";
});
});
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.