Mega Drop Down Menu In Blogger By Wikiblogism

Developer
Junaid Khalid
Size
3,746 Kb
Views
16,192
  1. Mega Drop Down Menu In Blogger By Wikiblogism Previews
  2. Mega Drop Down Menu In Blogger By Wikiblogism HTML Codes
  3. Mega Drop Down Menu In Blogger By Wikiblogism CSS Codes
  4. Mega Drop Down Menu In Blogger By Wikiblogism JS Codes

How do I make an mega drop down menu in blogger by wikiblogism?

What is a mega drop down menu in blogger by wikiblogism? How do you make a mega drop down menu in blogger by wikiblogism? This script and codes were developed by Junaid Khalid on 30 November 2022, Wednesday.

Mega Drop Down Menu In Blogger By Wikiblogism Previews
IQ Test

Mega Drop Down Menu In Blogger By Wikiblogism - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Mega Drop Down Menu In Blogger By Wikiblogism</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/> <link rel="stylesheet" href="css/style.css">
</head>
<body> <body>
<ul id="adajaxmenu" class="admenus"> <li><a href='/'><i class='fa fa-home fa-lg'></i></a></li>
<li> <a href="#">Blogging</a>
<ul>
<li><a href="https://problogworld.blogspot.com/search/label/Blogger%20Design?&max-results=7">Blog Design</a></li>
<li>
<li><a href="https://problogworld.blogspot.com/search/label/CSS%20Menu">Menus</a></li>
<li><a href="https://wikiblogism.blogspot.com/search/label/Blogger%20Widgets">Widgets</a></li>
<li><a href="https://wikiblogism.blogspot.com/search/label/CSS%20Buttons">Buttons</a></li>
</ul> </li>
<li><a href='https://wikiblogism.blogspot.com/search/label/How%20to'>How To</a>
</li>
<li><a href='https://wikiblogism.blogspot.com/search/label/Blogger%20SEO%20Tips'>SEO</a></li>
<li><a href='https://wikiblogism.blogspot.com/p/about.html'>About</a></li>
<li><a href='#'>Contact</a></li>
<li class='search-form'>
<form action='/search' class='searchblog' method='get'>
<input class='searchbar' name='q' placeholder='Search Here' size='30' type='text'/>
<input class='searchsubmit' type='submit' value='Search'/>
</form> <p class='search-alert'>Search form is empty!</p>
</li>
</ul> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdn.rawgit.com/Arlina-Design/redvision/master/javmenu.js'></script> <script src="js/index.js"></script>
</body>
</html>

Mega Drop Down Menu In Blogger By Wikiblogism - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Oswald);
body {
background-color:#f9f9f9;
font-size:16px
color:#444;
}
.post-body h2{
color:#f54325;
font-family:'Oswald';
font-weight:400;
text-align:center;
}
.post-body {
max-width:680px;
margin:20px auto;
border:10px solid #f0f0f0;
padding:15px 20px;
background-color:#fff;
color:#444;
font-family:'Arial';
font-size:13px;
}
.admenus * {
margin:0;
padding:0;
}
ul.admenus {
list-style:none;
line-height:1;
overflow:visible!important;
}
ul.admenus:after {
margin:0;
padding:0;
content:' ';
display:block;
height:0px;
clear:both;
}
ul.admenus li {
float:left;
display:inline;
position:relative;
font-size:14px;
font-weight:400;
text-transform:uppercase;
}
ul.admenus li a {
display:block;
line-height:50px;
padding:0 20px;
text-decoration:none;
color:#2c2c2c;
font-family:'Oswald';
font-size:13px;
font-weight:400;
transition:all 0.3s ease-in-out;
}
ul.admenus li a:hover,ul.admenus li a.hoverover {
background:#f54325;
color:#fff;
}
ul.admenus ul {
position:absolute;
display:none;
top:100%;
border:1px solid #ccc;
}
ul.admenus li:hover > ul {
display:block;
}
ul.admenus ul li {
z-index:72;
float:none;
min-width:160px;
background:#f5f5f5;
text-shadow:none;
}
ul.admenus ul li a {
text-transform:none;
font-weight:normal;
color:#aaa;
font-family:'Arial';
}
ul.admenus ul li a:hover,ul.adajaxmenu ul li a.hover {
background:#f54325;
}
ul.admenus ul ul {
display:none;
left:100%;
top:0;
}
ul.adajaxmenu li div.submenu {
position:absolute;
width:600px;
z-index:90;
left:0;
top:100%;
overflow:hidden;
min-height:150px;
background:#f0f0f0;
-moz-transform:translate(0,30px);
-webkit-transform:translate(0,30px);
-o-transform:translate(0,30px);
transform:translate(0,30px);
transform-origin:50% 0;
visibility:hidden;
opacity:0;
color:#929292;
box-shadow:0 10px 7px -7px rgba(0,0,0,0.1);
transition:all 0.3s ease-in-out;
}
ul.adajaxmenu li:hover div.submenu {
visibility:visible;
opacity:1;
-moz-transform:translate(0,0);
-webkit-transform:translate(0,0);
-o-transform:translate(0,0);
transform:translate(0,0);
}
ul.adajaxmenu ul ,ul.adajaxmenu ul li {
display:block!important;
border:0 none!important;
margin:0!important;
padding:0!important;
}
ul.adajaxmenu ul li {
background:none!important;
float:none!important;
}
ul.adajaxmenu ul.verticlemenu {
position:absolute;
width:33%;
left:0;
top:0;
bottom:0;
background:#202020;
}
ul.adajaxmenu ul.postslist {
position:relative;
display:block;
width:65%;
float:right;
margin:0 0 15px 0!important;
background:none;
}
ul.adajaxmenu ul.postslist li {
display:block;
overflow:hidden;
position:relative;
min-height:60px;
padding:15px 8px 15px 110px!important
}
ul.adajaxmenu ul.postslist li .imgCont {
position:absolute;
left:0;
top:15px;
width:100px;
height:70px;
overflow:hidden;
font-size:0;
line-height:0;
border:1px solid #929292;
}
ul.adajaxmenu ul.postslist li .imgCont img {
position:relative;
top:-20px;
padding:0;
width:100px;
height:100px;
display:block;
}
ul.adajaxmenu ul.postslist li a {
display:block;
line-height:1.4;
padding:0!important;
color:#666;
font-family:'Arial';
font-size:12px;
transition:all 0.3s ease-in-out;
}
ul.adajaxmenu ul.postslist li a:hover {
color:#f54325;
background:transparent;
}
ul.adajaxmenu .loader {
background: url('https://4.bp.blogspot.com/-sRHd2OR7omQ/VFBOax0jdNI/AAAAAAAABgg/ei6bgO1agM0/s1600/adloading.gif') no-repeat scroll 0 0 transparent;
width:22px;
height:22px;
position:absolute;
top:50%;
margin-top:-11px;
right:5px;
}
ul.adajaxmenu .menuArrow {
border-bottom:4px solid transparent;
border-top:4px solid transparent;
border-left:4px solid #fff;
display:block;
height:0;
margin-top:-4px;
position:absolute;
right:11px;
top:50%;
width:0;
}
#adajaxmenu {
background:#fff;
height:50px;
width:100%;
position:relative;
border:1px solid #e6e6e6;
max-width:980px;
margin:0 auto;
padding:0 20px;
}
li.search-form{
float:right!important;
line-height:50px;
margin:0 20px 0 0;
}
li.search-form .searchbar{
border:none;
padding:10px 5px;
background:#f9f9f9;
color:#fff;
width:130px;
}
li.search-form .searchbar:focus{
border:none;
outline:none;
background:#fafafa;
color:#666;
}
li.search-form .searchsubmit{
background:#f54325;
border:none;
color:#fff;
cursor:pointer;
padding:10px 5px;
transition:all 0.3s ease-in-out;
}
li.search-form .searchsubmit:hover{
opacity:0.9;
}
.search-alert{
color:#f9f9f9;
padding:2px 15px 2px 40px;
display:none;
margin:5px;
background:#333 url(https://4.bp.blogspot.com/-Pzf65SZdXYo/VFHy3_xVhmI/AAAAAAAABg4/W2QdE2000f4/s1600/Indicate.png) no-repeat;
background-position:10px;
border-radius:5px;
text-transform:lowercase;
}

Mega Drop Down Menu In Blogger By Wikiblogism - Script Codes JS Codes

jQuery(document).ready(function($) {	$('#adajaxmenu').ajaxBloggerMenu({	numPosts : 4, // Number of Posts to show	defaultImg : 'http://url-to-image.com/default-image.jpeg' // Default thumbnail Image	});
});
$(function(){ $('.searchblog').submit(function(e){ if($('.search-form .searchbar').val().length==0){ $('.search-form .search-alert').fadeIn().css('display','inline-block'); e.preventDefault(); } });
});
Mega Drop Down Menu In Blogger By Wikiblogism - Script Codes
Mega Drop Down Menu In Blogger By Wikiblogism - Script Codes
Home Page Home
Developer Junaid Khalid
Username JunaidKhalid
Uploaded November 30, 2022
Rating 3
Size 3,746 Kb
Views 16,192
Do you need developer help for Mega Drop Down Menu In Blogger By Wikiblogism?

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!

Junaid Khalid (JunaidKhalid) Script Codes
Name
Blogger template
Add Rollover Social Media Icons Widget in Blogger
A Pen by Junaid Khalid
Sliding CSS Demo and Download Buttons
3 Unique Animated Social Media Icons Widgets for Blogger
Add CSS Minifier and Expander tool to your blogger blog
Custom HTML5 Audio Player
Responsive grid style sitemap page for blogger
Hot Bottons
Profile Card widget
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!