CLICKABLE MENU ..

Developer
Vedat Sözen
Size
2,592 Kb
Views
14,168
  1. CLICKABLE MENU .. Previews
  2. CLICKABLE MENU .. HTML Codes
  3. CLICKABLE MENU .. CSS Codes
  4. CLICKABLE MENU .. JS Codes

How do I make an clickable menu ..?

Clickable menu .. I made an icon to animate a menu div from left . I added a close icon to animate it to the left again .. What is a clickable menu ..? How do you make a clickable menu ..? This script and codes were developed by Vedat Sözen on 27 November 2022, Sunday.

CLICKABLE MENU .. Previews
IQ Test

CLICKABLE MENU .. - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CLICKABLE MENU .. </title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <head>
<title></title>
<meta charset="utf-8">
<link rel="stylesheet" href="stil.css">
<link href='https://fonts.googleapis.com/css?family=Ubuntu+Condensed' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Cuprum' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://www.bitstorm.org/jquery/color-animation/jquery.animate-colors-min.js"></script>
<script src="stil.js"></script>
</head>
<body>
<div id="menuicon"><img src="https://dl-web.dropbox.com/get/images/menu.jpg?_subject_uid=130630682&w=AAC44Q1lpu468zVk9AHw26dtMQlxDjuqEa3C9fJNRFv5LQ"></div>
<div id="menu">
<ul>
<li><img src="https://dl-web.dropbox.com/get/images/close.png?_subject_uid=130630682&w=AABbBrnOD7ifTag7LsoI4JJHRgJ7vWsmSOto2jjmLeliFw"></li>
<li>HOME</li>
<li>ABOUT</li>
<li>PRODUCTS</li>
<li>CONTACT</li>
</ul>
</div>
<div id="slogan">ORANGE INTERIOR DESIGN<br><span class="slogan2">WE DESIGN YOUR HOUSES</span></div>
</body>
</html> <script src="js/index.js"></script>
</body>
</html>

CLICKABLE MENU .. - Script Codes CSS Codes

body { margin:auto; background: beige; margin:0;
background-image:url("http://wallpaperscraft.com/image/11140/3840x2160.jpg");
background-size:100% 100%;
background-attachment: fixed;
}
#menu { margin:auto; position: fixed; width: 200px; height: 400px; background: beige; font-family: Cuprum; box-sizing:border-box; text-align: center; color: black; transform:translateX(-200px);
}
#menu ul { list-style: none; padding:10px; margin:0px; }
#menu ul li { line-height:70px; font-size:40px; }
#menu ul li:nth-child(1) { text-align: right; }
#menuicon {
font-size: 20px;
font-family:Cuprum;
color: red;
margin:5px;
padding:5px;
height: 50px;
width: 50px;
}
#menuicon img { height: 40px; width: 40px; cursor: pointer;}
#menu ul li img { height: 40px; width: 40px; cursor: pointer;}
#slogan {
margin:auto;
position: absolute;
height: 100px;
line-height: 50px;
width: 800px;
font-size:70px;
font-family: 'Ubuntu Condensed', sans-serif;
font-weight: bold;
padding: 5px;
color: beige;
top: 0;
bottom: 0;
left: 0;
right: 0;
text-align: center;
padding:10px;
filter:sepia(10);
}
.slogan2 { font-size: 20px; color: beige; }

CLICKABLE MENU .. - Script Codes JS Codes

$(document).ready(function(){
$("#menuicon img").click(function(){
$("#menu").animate({left:"200px"},500);
});
$("#menu ul li:nth-child(1) img").click(function(){
$("#menu").animate({left:"-200px"},500);
});
});
CLICKABLE MENU .. - Script Codes
CLICKABLE MENU .. - Script Codes
Home Page Home
Developer Vedat Sözen
Username vedatsozen
Uploaded November 27, 2022
Rating 3
Size 2,592 Kb
Views 14,168
Do you need developer help for CLICKABLE 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!

Vedat Sözen (vedatsozen) Script Codes
Name
SIMPLE BILLIARD GAME TRIAL
SIMPLE PROFILE PAGE by JAVASCRIPT
HOW TO CHANGE BACKGROUND IMAGE OF DIVS
MOBILE PHONE PAGE WITH SIMPLE ANIMATION
MATERIAL DESIGN BUTTON ANIMATION
SIMPLE PHOTO SLIDER
SIMPLE ANIMATION
SIMPLE FOOTBALL QUIZ ..
Drop Down Menu
PHOTO SLIDER
Create amazing sales emails 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!