Compact menu

Developer
Roman Budnikov
Size
3,181 Kb
Views
6,072
  1. Compact menu Previews
  2. Compact menu HTML Codes
  3. Compact menu CSS Codes
  4. Compact menu JS Codes

How do I make an compact menu?

Menu using css3 transition. What is a compact menu? How do you make a compact menu? This script and codes were developed by Roman Budnikov on 20 January 2023, Friday.

Compact menu Previews
IQ Test

Compact menu - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>compact menu</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <nav> <ul> <li> <a href='#'> <div class='typicn home'>Home</div> </a> </li> <li> <a href='#'> <div class='typicn cog'>Settings</div> </a> </li> <li> <a href='#'> <div class='typicn location'>Location</div> </a> </li> <li> <a href='#'> <div class='typicn user'>Profile</div> </a> </li> </ul>
</nav> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Compact menu - Script Codes CSS Codes

@import url("https://fonts.googleapis.com/css?family=Open+Sans&subset=latin,cyrillic");
@font-face { font-family: 'Typicons'; src: url("http://typicons.com/media/fonts/typicons-regular-webfont.eot"); src: url("http://typicons.com/media/fonts/typicons-regular-webfont.eot?#iefix") format("embedded-opentype"), url("http://typicons.com/media/fonts/typicons-regular-webfont.woff") format("woff"), url("http://typicons.com/media/fonts/typicons-regular-webfont.ttf") format("truetype"), url("http://typicons.com/media/fonts/typicons-regular-webfont.svg#TypiconsRegular") format("svg"); font-weight: normal; font-style: normal;
}
.home::before { content: "C";
}
.cog::before { content: "O";
}
.user::before { content: "X";
}
.location::before { content: "A";
}
.typicn::before { font-family: "Typicons", sans-serif; font-size: 50px; -webkit-font-smoothing: antialiased; vertical-align: middle;
}
nav { text-align: center;
}
nav ul { list-style: none; margin: 0; padding: 0;
}
nav ul li { display: inline-block;
}
nav ul li a { color: #3c3c64; text-decoration: none;
}
nav ul li a .typicn { font-size: 24px; width: 45px; font-family: 'Open Sans', sans-serif; overflow: hidden; -moz-transition: width 0.5s; -o-transition: width 0.5s; -webkit-transition: width 0.5s; transition: width 0.5s;
}
nav ul li a:hover .typicn { width: 150px;
}

Compact menu - Script Codes JS Codes

(function() {
}).call(this);
Compact menu - Script Codes
Compact menu - Script Codes
Home Page Home
Developer Roman Budnikov
Username supro
Uploaded January 20, 2023
Rating 3
Size 3,181 Kb
Views 6,072
Do you need developer help for Compact 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!

Roman Budnikov (supro) Script Codes
Name
A Pen by Roman Budnikov
Flat animated buttons
Rodeo-004 example
Rating
Css chat
Flex barcket
404 page
App header
AngularJS Skills
Letter
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!