Hover Menu Style

Developer
Jhonsore
Size
3,240 Kb
Views
6,072
  1. Hover Menu Style Previews
  2. Hover Menu Style HTML Codes
  3. Hover Menu Style CSS Codes

How do I make an hover menu style?

What is a hover menu style? How do you make a hover menu style? This script and codes were developed by Jhonsore on 09 December 2022, Friday.

Hover Menu Style Previews
IQ Test

Hover Menu Style - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Hover Menu Style</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- Inspiration -->
<!--https://tympanus.net/Development/LineMenuStyles/ -->
<section class="bg-river"> <ul class="menu-1"> <li> <button>HOME</button> <em class="feed anim-menu"></em> </li> <li> <button>NEWS</button> <em class="feed anim-menu"></em> </li> <li> <button>ABOUT</button> <em class="feed anim-menu"></em> </li> <li> <button>CONTACT</button> <em class="feed anim-menu"></em> </li> </ul>
</section>
<section class="bg-turquoise"> <ul class="menu-2"> <li> <button>HOME</button> <em class="feed anim-menu"></em> </li> <li> <button>NEWS</button> <em class="feed anim-menu"></em> </li> <li> <button>ABOUT</button> <em class="feed anim-menu"></em> </li> <li> <button>CONTACT</button> <em class="feed anim-menu"></em> </li> </ul>
</section>
<section class="bg-amethyst"> <ul class="menu-3"> <li> <button class="anim-menu">HOME</button> <em class="feed anim-menu"></em> </li> <li> <button class="anim-menu">NEWS</button> <em class="feed anim-menu"></em> </li> <li> <button class="anim-menu">ABOUT</button> <em class="feed anim-menu"></em> </li> <li> <button class="anim-menu">CONTACT</button> <em class="feed anim-menu"></em> </li> </ul>
</section>
<section class="bg-carrot"> <ul class="menu-4"> <li> <button class="anim-menu">HOME</button> <em class="feed anim-menu"></em> </li> <li> <button class="anim-menu">NEWS</button> <em class="feed anim-menu"></em> </li> <li> <button class="anim-menu">ABOUT</button> <em class="feed anim-menu"></em> </li> <li> <button class="anim-menu">CONTACT</button> <em class="feed anim-menu"></em> </li> </ul>
</section>
<section class="bg-pomegranate"> <ul class="menu-5"> <li> <button class="anim-menu">HOME</button> <em class="feed anim-menu"></em> </li> <li> <button class="anim-menu">NEWS</button> <em class="feed anim-menu"></em> </li> <li> <button class="anim-menu">ABOUT</button> <em class="feed anim-menu"></em> </li> <li> <button class="anim-menu">CONTACT</button> <em class="feed anim-menu"></em> </li> </ul>
</section>
</body>
</html>

Hover Menu Style - Script Codes CSS Codes

@import url('https://fonts.googleapis.com/css?family=Josefin+Sans:400,300,600');
.font_josefin { font-family: 'Josefin Sans', sans-serif;
}
section { height: 400px; display: table; width: 100%;
}
ul { height: 400px; display: table-cell; width: 100%; vertical-align: middle; text-align: center;
}
li { display: inline-block;
}
.anim-menu { /*lets anim*/ -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;
}
/*menu 1*/
.menu-1 li:hover .feed { display: block; width: 100%; margin-left: -50%;
}
.menu-1 li { position: relative; margin: 0 20px;
}
.menu-1 li button { font-family: 'Josefin Sans', sans-serif; font-size: 20px; color: #ffffff;
}
.menu-1 .feed { position: absolute; height: 2px; width: 0; background-color: #ffffff; bottom: -4px; left: 50%;
}
/*menu 2*/
.menu-2 li:hover .feed { display: block; width: 100%;
}
.menu-2 li { position: relative; margin: 0 20px;
}
.menu-2 li button { font-family: 'Josefin Sans', sans-serif; font-size: 20px; color: #ffffff;
}
.menu-2 .feed { position: absolute; height: 2px; width: 0; background-color: #ffffff; bottom: -4px; left: 0;
}
/*menu 3*/
.menu-3 li:hover .feed { display: block; width: 100%;
}
.menu-3 li:hover button { color: #9b59b6; position: relative; z-index: 10;
}
.menu-3 li { position: relative; margin: 0 20px; height: 40px;
}
.menu-3 li button { font-family: 'Josefin Sans', sans-serif; font-size: 20px; color: #ffffff; margin-top: 12px; padding: 0 20px;
}
.menu-3 .feed { position: absolute; height: 100%; width: 0; background-color: #ffffff; bottom: 0; left: 0;
}
/*menu 4*/
.menu-4 li { position: relative; margin: 0 20px; height: 40px;
}
.menu-4 li button { position: relative; z-index: 10; font-family: 'Josefin Sans', sans-serif; font-size: 20px; color: #ffffff; margin-top: 12px; padding: 0 20px;
}
.menu-4 .feed { position: absolute; height: 0; width: 100%; background-color: #ffffff; bottom: 0; left: 0;
}
.menu-4 li:hover .feed { display: block; height: 100%;
}
.menu-4 li:hover button { color: #e67e22;
}
/*menu 5*/
.menu-5 li { position: relative; margin: 0 20px; height: 40px;
}
.menu-5 li button { position: relative; z-index: 10; font-family: 'Josefin Sans', sans-serif; font-size: 20px; color: #ffffff; margin-top: 12px; padding: 0 20px;
}
.menu-5 .feed { position: absolute; height: 0; width: 100%; background-color: #ffffff; top: 50%; left: 0;
}
.menu-5 li:hover .feed { display: block; height: 100%; margin-top: -20px;
}
.menu-5 li:hover button { color: #c0392b;
}
/*reset button appearance*/
button,
input[type="submit"] { background: none; border: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; outline: 0; cursor: pointer;
}
/*bg colors*/
.bg-turquoise { background-color: #1abc9c;
}
.bg-river { background-color: #3498db;
}
.bg-amethyst { background-color: #9b59b6;
}
.bg-sun { background-color: #f1c40f;
}
.bg-carrot { background-color: #e67e22;
}
.bg-pomegranate { background-color: #c0392b;
}
Hover Menu Style - Script Codes
Hover Menu Style - Script Codes
Home Page Home
Developer Jhonsore
Username jhonsore
Uploaded December 09, 2022
Rating 3
Size 3,240 Kb
Views 6,072
Do you need developer help for Hover Menu Style?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Jhonsore (jhonsore) Script Codes
Name
Sorting A Table With jQuery UI
Move element on window scroll with jquery
Zoom image detail
Responsive Tab Boxes
Slider rotate
Jquery Notification
Responsive Dashboard
Browser push notification with Push.js
Custom JPlayer
Custom alert
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!