Wordpress Menu

Developer
Jessica Pittman
Size
2,221 Kb
Views
18,216
  1. Wordpress Menu Previews
  2. Wordpress Menu HTML Codes
  3. Wordpress Menu CSS Codes
  4. Wordpress Menu JS Codes

How do I make an wordpress menu?

What is a wordpress menu? How do you make a wordpress menu? This script and codes were developed by Jessica Pittman on 28 October 2022, Friday.

Wordpress Menu Previews
IQ Test

Wordpress Menu - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Wordpress Menu</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <a href="" id="menu-button">Text</a>
<nav id="vl-navigation" role="navigation"> <ul id="menu-main-menu" class="main-menu"> <li class="">Link</li> <li class="menu-item menu-item-has-children"><a href="">Link</a> <ul class="sub-menu"> <li class="menu-item"><a href="yahoo.com" target="_blank">Link</a></li> </ul> </li> <li class="menu-item menu-item-has-children"><a>Link</a> <ul class="sub-menu"> <li class="menu-item"><a href="yahoo.com" target="_blank">Link</a></li> </ul> </li> </ul>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Wordpress Menu - Script Codes CSS Codes

.visible { visibility: visible !important;
}
nav#vl-navigation { visibility: hidden;
}
ul.sub-menu { display: none; position: relative;
}

Wordpress Menu - Script Codes JS Codes

$(document).ready(function() { $('#menu-button').click(function(e) { e.preventDefault(); $('nav#vl-navigation').toggleClass("visible"); }); $('nav ul li a:not(:only-child)').click(function(e) { e.preventDefault(); $(this).siblings('.sub-menu').toggle(); $('.sub-menu').not($(this).siblings()).hide(); e.stopPropagation(); }); $('nav ul li a:not(:only-child)').mouseenter(function(e) { $(this).siblings('.sub-menu').slideDown(); $('.sub-menu').not($(this).siblings()).slideUp(); }); $('.sub-menu').mouseleave(function(e) { $(this).slideUp(); }); // Clicking away from menu will remove submenu $('html').click(function() { $('.sub-menu').hide(); });
});
Wordpress Menu - Script Codes
Wordpress Menu - Script Codes
Home Page Home
Developer Jessica Pittman
Username jessikuh
Uploaded October 28, 2022
Rating 3
Size 2,221 Kb
Views 18,216
Do you need developer help for Wordpress 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!

Jessica Pittman (jessikuh) Script Codes
Name
Tribute Page
A Pen by Jessica Pittman
Home Energy Solutions Banner
Thunderbird Resort
Steven Finlay
Random Quote Generator
Commissioned Skin
Control Group Heating
Font Combinations
Scheme Ideas
Create amazing Facebook ads 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!