Accordion - Menu

Developer
Alexander Nastase
Size
2,356 Kb
Views
26,312
  1. Accordion - Menu Previews
  2. Accordion - Menu HTML Codes
  3. Accordion - Menu CSS Codes

How do I make an accordion - menu?

Main design from http://www.premiumpixels.com/freebies/accordion-style-navigation-psd/. What is a accordion - menu? How do you make a accordion - menu? This script and codes were developed by Alexander Nastase on 21 August 2022, Sunday.

Accordion - Menu Previews
IQ Test

Accordion - Menu - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Accordion - Menu</title> <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <ul id="accordionMenu"> <li><i class="icon-user"></i> Profile</li> <li><i class="icon-envelope"></i> Messages <span>32</span></li> <ul class="submenu"> <li><i class="icon-angle-right"></i> Inbox</li> <li><i class="icon-angle-right"></i> Sent</li> <li><i class="icon-angle-right"></i> Drafts</li> </ul> <li><i class="icon-cog"></i> Settings</li> <li><i class="icon-off"></i> Logout</li>
</ul> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Accordion - Menu - Script Codes CSS Codes

html { background:url("http://subtlepatterns.com/patterns/wood_pattern.png") fixed; }
#accordionMenu { display:block; min-width:220px; position:absolute; top:50%; left:50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background:#262e37; margin:0px; padding:0px; border-radius:5px; box-shadow: 0 0 0 3px rgba(0,0,0,.15), 0px 15px 50px 10px rgba(0,0,0,0.7), inset 0 2px rgba(255,255,255,.07); border: solid 1px #181e26; font-size:15px; color:#c9d1e3; font-family:Arial; overflow:hidden; }
#accordionMenu>li { position:relative; cursor:pointer; list-style:none; margin:0px; padding:11px; background: #383d49; border-bottom:solid 1px #1e2127; box-shadow: inset 0 1px rgba(255,255,255,.07); background-image: -webkit-linear-gradient(bottom, rgba(0,0,0,.08), rgba(255,255,255,.08)); background-image: -moz-linear-gradient(bottom, rgba(0,0,0,.08), rgba(255,255,255,.08)); background-image: -o-linear-gradient(bottom, rgba(0,0,0,.08), rgba(255,255,255,.08)); background-image: -ms-linear-gradient(bottom, rgba(0,0,0,.08), rgba(255,255,255,.08)); background-image: linear-gradient(to top, rgba(0,0,0,.08), rgba(255,255,255,.08)); text-shadow:1px 1px #1a2026; } #accordionMenu>li:last-of-type { border-bottom:none; } #accordionMenu>li>i { margin-right:5px; font-size:14px; } #accordionMenu>li>span { float:right; font-size:10px; display:inline-block; color:#a8c2d8; font-weight:bold; padding:0px 7px 3px 7px; border-radius: 3px;	background-color: #464c5a; box-shadow: 0 1px 3px rgba(0,0,0,.3), inset 0 1px rgba(255,255,255,.1);	background-image: -webkit-linear-gradient(bottom, rgba(0,0,0,.1), rgba(255,255,255,.1)); background-image: -moz-linear-gradient(bottom, rgba(0,0,0,.1), rgba(255,255,255,.1)); background-image: -o-linear-gradient(bottom, rgba(0,0,0,.1), rgba(255,255,255,.1)); background-image: -ms-linear-gradient(bottom, rgba(0,0,0,.1), rgba(255,255,255,.1)); background-image: linear-gradient(to top, rgba(0,0,0,.1), rgba(255,255,255,.1)); }
#accordionMenu>.submenu { background:url("http://subtlepatterns.com/patterns/noisy_net.png")fixed; margin:0px; padding:13px 10px 13px 0px; } #accordionMenu>.submenu>li { cursor:pointer; list-style:none; text-shadow:1px 1px #1a2026; color:#798ea1; font-size:12px; font-weight:bold; text-transform:uppercase; margin:6px 0px 6px 15px; }
#accordionMenu>.submenu>li>i { margin:0px 10px 0px 0px; }
Accordion - Menu - Script Codes
Accordion - Menu - Script Codes
Home Page Home
Developer Alexander Nastase
Username anodpixels
Uploaded August 21, 2022
Rating 3
Size 2,356 Kb
Views 26,312
Do you need developer help for Accordion - 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!

Alexander Nastase (anodpixels) Script Codes
Name
Carousel_listing
CSS spinning loader
Right Click Menu
Old Browser Warning
Tryout_slider
Pressable CSS Buttons
Target effect
Accordion - Menu
Target effects
Simple Tabs
Create amazing web content 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!