A Responsive Menu

Developer
Ken Lauguico
Size
3,590 Kb
Views
4,048
  1. A Responsive Menu Previews
  2. A Responsive Menu HTML Codes
  3. A Responsive Menu CSS Codes
  4. A Responsive Menu JS Codes

How do I make an a responsive menu?

Testing out Slim + Stylus while creating a responsive menu.Inspired by Kyee (http://dribbble.com/shots/450349-Responsive-menu). What is a a responsive menu? How do you make a a responsive menu? This script and codes were developed by Ken Lauguico on 20 December 2022, Tuesday.

A Responsive Menu Previews
IQ Test

A Responsive Menu - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Responsive Menu</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="nav"> <div class="title"> Incoming<span> Messages</span> </div> <a class="fontawesome-comment active"><span>New</span> <div class="bubble"> 10 </div> </a><a class="fontawesome-flag"><span>Priority</span> <div class="bubble"> 8 </div> </a><a class="fontawesome-user"><span>Assigned</span> <div class="bubble"> 0/17 </div> </a><a class="fontawesome-folder-close"><span>Archived</span> <div class="bubble"> 3 </div> </a><a class="fontawesome-trash"><span>Deleted</span> <div class="bubble"> 9 </div> </a><a>Show All</a>
</div> <script src="js/index.js"></script>
</body>
</html>

A Responsive Menu - Script Codes CSS Codes

/* vars */
@import url("http://weloveiconfonts.com/api/?family=fontawesome");
/* zocial */
[class*="fontawesome-"]:before { font-family: 'FontAwesome' sans-serif; font-size: 1.3em; margin-right: 0.8em; color: #d2d5d9;
}
/* mixin */
body { font-family: Arial, sans-serif; font-size: 0.9em; background-color: #f3f4f4;
}
.nav { color: #6d7580; min-width: 90px; max-width: 250px; height: 333px; background-color: #fff; border: 1px solid #d2d5d9; border-radius: 4px; box-shadow: 0 1px 2px rgba(0,0,0,0.1); position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto;
}
a > span { opacity: 1; transition: opacity 0.3s;
}
.nav > a { box-sizing: border-box; position: relative; display: block; padding: 1em; border-bottom: 1px solid #d2d5d9;
}
.nav > a:last-child { border-bottom: 0; border-radius: 0 0 4px 4px;
}
.nav > a:hover { background-color: #6d7580; color: #fff;
}
.nav > a:hover:before { color: #fff;
}
.nav > a:hover .bubble { border: 0; background: #f00; color: #fff;
}
.nav > a:hover::after { width: 0; height: 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 8px solid #6d7580; content: ''; display: block; position: absolute; right: -8px; top: 1.1em;
}
a.active { background-color: #6d7580; color: #fff;
}
a.active:before { color: #fff;
}
a.active .bubble { border: 0; background: #f00; color: #fff;
}
a.active::after { width: 0; height: 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 8px solid #6d7580; content: ''; display: block; position: absolute; right: -8px; top: 1.1em;
}
.nav > .title { box-sizing: border-box; position: relative; display: block; padding: 1em; background-color: #4a4f56; color: #fff; font-weight: 500; border-radius: 4px 4px 0 0;
}
.bubble { position: absolute; top: 1.3em; right: 1em; font-size: 0.8em; color: #6d7580; border: 1px solid #6d7580; border-radius: 10px; padding: 2px 5px;
}
/* responsiveness */
@media (max-width: 180px) { .title > span { display: none; } .nav > a > span { opacity: 0; transition: opacity 0.3s; }
}

A Responsive Menu - Script Codes JS Codes

/*
Responsive Menu
Inspired by http://dribbble.com/shots/450349-Responsive-menu
Resize the window!
*/
A Responsive Menu - Script Codes
A Responsive Menu - Script Codes
Home Page Home
Developer Ken Lauguico
Username kenlauguico
Uploaded December 20, 2022
Rating 4.5
Size 3,590 Kb
Views 4,048
Do you need developer help for A Responsive Menu?

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!

Ken Lauguico (kenlauguico) Script Codes
Name
Flat Email Form
Animated Captions via data- Attribute
Fourground Logo
A Pen by Ken Lauguico
Pure CSS Image Slider
Simple Dot Loader
Force Counter
Protoshow.js Demo
Just an animated underline
Typing Simulator
Create amazing captions 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!