Dropdown Menu on Image Click with Zoom

Developer
Deyan Dimitrov
Size
2,639 Kb
Views
18,216
  1. Dropdown Menu on Image Click with Zoom Previews
  2. Dropdown Menu on Image Click with Zoom HTML Codes
  3. Dropdown Menu on Image Click with Zoom CSS Codes
  4. Dropdown Menu on Image Click with Zoom JS Codes

How do I make an dropdown menu on image click with zoom?

What is a dropdown menu on image click with zoom? How do you make a dropdown menu on image click with zoom? This script and codes were developed by Deyan Dimitrov on 13 November 2022, Sunday.

Dropdown Menu on Image Click with Zoom Previews
IQ Test

Dropdown Menu on Image Click with Zoom - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Dropdown Menu on Image Click with Zoom</title> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/css/lightbox.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <body> <header> <h2>Click on images to display dropdown menu</h2> </header> <div class="clear"></div> <section> <p class="eee-image"> <a href="javascript:void(0)" class="eee-image--click eee-image__link"> <img class="eee-image__image" src="https://cdn0.vox-cdn.com/thumbor/FhcChfRMtaB3GugSo3WVILhgAvE=/cdn0.vox-cdn.com/uploads/chorus_asset/file/4316999/SamuraiJack.0.gif" /> </a> <div class="eee-image__dropdown"> <a class="eee-image__dropdown-link" href="https://cdn0.vox-cdn.com/thumbor/FhcChfRMtaB3GugSo3WVILhgAvE=/cdn0.vox-cdn.com/uploads/chorus_asset/file/4316999/SamuraiJack.0.gif" data-lightbox="image-1" data-title="Samurai Jack is back"> <i class="fa fa-search-plus"></i>&nbsp;Zoom zoom</a> <a class="eee-image__dropdown-link" href="#">link 1</a> <a class="eee-image__dropdown-link" href="#">link 2</a> </div> </p> <p class="eee-image"> <a href="javascript:void(0)" class="eee-image--click eee-image__link"> <img class="eee-image__image" src="https://cdn0.vox-cdn.com/thumbor/FhcChfRMtaB3GugSo3WVILhgAvE=/cdn0.vox-cdn.com/uploads/chorus_asset/file/4316999/SamuraiJack.0.gif" /> </a> <div class="eee-image__dropdown"> <a class="eee-image__dropdown-link" href="https://cdn0.vox-cdn.com/thumbor/FhcChfRMtaB3GugSo3WVILhgAvE=/cdn0.vox-cdn.com/uploads/chorus_asset/file/4316999/SamuraiJack.0.gif" data-lightbox="image-1" data-title="Samurai Jack"> <i class="fa fa-search-plus"></i>&nbsp;Zoom zoom</a> <a class="eee-image__dropdown-link" href="#">menu 1</a> <a class="eee-image__dropdown-link" href="#">menu 2</a> </div> </p> <p class="eee-image"> <a href="javascript:void(0)" class="eee-image--click eee-image__link"> <img class="eee-image__image" src="http://www.cartoonbrew.com/wp-content/uploads/2016/07/samuraijack_new.jpg" /> </a> <div class="eee-image__dropdown"> <a class="eee-image__dropdown-link" href="http://www.cartoonbrew.com/wp-content/uploads/2016/07/samuraijack_new.jpg" data-lightbox="image-1" data-title="Jack is Back"> <i class="fa fa-search-plus"></i>&nbsp;Zoom zoom</a> <a class="eee-image__dropdown-link" href="#">old 1</a> <a class="eee-image__dropdown-link" href="#">new 1</a> </div> </p> </section>
</body> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/js/lightbox.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Dropdown Menu on Image Click with Zoom - Script Codes CSS Codes

body { font-family: Verdana, Helvetica, sans-serif;
}
header { background-color:#336699; height:60px; line-height:60px; padding:10px 0; text-align:center;
}
header h2 { height:15px; line-height:15px; color:#fff;
}
section{ max-width:1200px; margin:auto;
}
.eee-image { float:left; display:block; margin:15px;
}
.eee-image a
{ display: block;
}
/* .dropdown { float:left; margin:15px;
} */
.eee-image__dropdown {
/* display:none; */ position: absolute; background-color: #f9f9f9; min-width: 160px; overflow: hidden; z-index: 1;
}
.eee-image__dropdown a { padding: 12px 16px; color: #336699; text-decoration: none; display: block;
}
.eee-image__dropdown a:hover { background-color: #336699; color: #fff;
}
.show { display:block;
}

Dropdown Menu on Image Click with Zoom - Script Codes JS Codes

var dropdownWrapper = $('.eee-image__dropdown');
dropdownWrapper.hide();
$('.eee-image--click').on('click', function(e) { var self = $(this); var dropdownMenu = self.parent().next('.eee-image__dropdown'); dropdownMenu.hide(); dropdownMenu.css( 'top', e.pageY ); dropdownMenu.css( 'left', e.pageX ); dropdownMenu.show(300);
});
// Hide menu on click outside of the image
$(document).click(function(event) { if(!$(event.target).closest('.eee-image--click').length) { if($('.eee-image__dropdown').is(":visible")) { $('.eee-image__dropdown').hide(); } }
})
Dropdown Menu on Image Click with Zoom - Script Codes
Dropdown Menu on Image Click with Zoom - Script Codes
Home Page Home
Developer Deyan Dimitrov
Username deyand
Uploaded November 13, 2022
Rating 3
Size 2,639 Kb
Views 18,216
Do you need developer help for Dropdown Menu on Image Click with Zoom?

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!

Deyan Dimitrov (deyand) Script Codes
Name
Expandable Menu
Filtering with shuffle.js
Responsive Mobile Menu with CSS
Adaptive div height
Dropdown Menu Effects
Sliding link on hover
Fixed header
A Pen by Deyan Dimitrov
Progress Bar with jQuery
Expandable Boxes with pure JS
Create amazing blog posts 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!