Custom menu with JS in WordPress theme - wordpress

Question

I have my custom menu in HTML theme and I want to create same menu but in wordpress.
On my page u can see how it works...
In this menu I use jQuery and Bootstrap dropdown. How to create this menu using wp_nav_menu ?
This is my code (HTML, JS, CSS).
<script type="text/javascript">
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
(function($) {
$.fn.menumaker = function(options) {
var cssmenu = $(this), settings = $.extend({
title: "Menu",
format: "dropdown",
sticky: false
}, options);
return this.each(function() {
cssmenu.prepend('<div id="menu-button">' + settings.title + '</div>');
$(this).find("#menu-button").on('click', function(){
$(this).toggleClass('menu-opened');
var mainmenu = $(this).next('ul');
if (mainmenu.hasClass('open')) {
mainmenu.hide().removeClass('open');
}
else {
mainmenu.show().addClass('open');
if (settings.format === "dropdown") {
mainmenu.find('ul').show();
}
}
});
cssmenu.find('li ul').parent().addClass('has-sub');
multiTg = function() {
cssmenu.find(".has-sub").prepend('<span class="submenu-button"></span>');
cssmenu.find('.submenu-button').on('click', function() {
$(this).toggleClass('submenu-opened');
if ($(this).siblings('ul').hasClass('open')) {
$(this).siblings('ul').removeClass('open').hide();
}
else {
$(this).siblings('ul').addClass('open').show();
}
});
};
if (settings.format === 'multitoggle') multiTg();
else cssmenu.addClass('dropdown');
if (settings.sticky === true) cssmenu.css('position', 'fixed');
resizeFix = function() {
if ($( window ).width() > 768) {
cssmenu.find('ul').show();
}
if ($(window).width() <= 768) {
cssmenu.find('ul').hide().removeClass('open');
}
};
resizeFix();
return $(window).on('resize', resizeFix);
});
};
})(jQuery);
(function($){
$(document).ready(function(){
$("#cssmenu").menumaker({
title: "Menu",
format: "multitoggle"
});
});
})(jQuery);
</script>
/*!
* Start Bootstrap - Simple Sidebar HTML Template (http://startbootstrap.com)
* Code licensed under the Apache License v2.0.
* For details, see http://www.apache.org/licenses/LICENSE-2.0.
*/
/* Toggle Styles */
/* FB, wersja jezykowa */
.fb-language {
position: fixed;
bottom: 20px;
left: 65px;
list-style: none;
}
/* Ikonka jezyka */
.lang-item {
display: inline;
}
/* ikonka fb */
.fb-language img {
display: inline-block;
width: 20px;
height: auto;
}
.fb-language p {
display: inline-block;
color: #999999;
font-size: 12px;
margin-left: 5px;
}
.fb-language a {
text-decoration: none;
color: #999999;
}
.fb-language a:hover {
color: #656565;
text-decoration: underline;
}
/* Kolor linku w menu jezeli jestes na podstronie */
.current_page_item a {
color: black !important;
}
.page_item {
list-style: none !important;
}
.dropdown-toggle .icon-bar {
margin-bottom:4px;
margin-top: 4px;
display: block;
width: 22px;
height: 2px;
background-color: #ffffff;
border-radius: 1px;
}
/* kolor button'a dla mobilnego menu */
button {
background-color: rgb(230, 225, 225) !important;
text-align: left !important;
left: 8px !important;
position: absolute;
}
.navbar-header {
position: fixed !important;
width: 100% !important;
height: 45px !important;
background-color: rgb(255, 255, 255) !important;
border-radius: 0 !important;
margin: 0 auto !important;
text-align: center !important;
}
.navbar-header img {
width: 13% !important;
height: auto !important;
margin: 0 auto !important;
text-align: center !important;
}
#wrapper {
padding-top: 50px;
padding-left: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled {
padding-left: 250px;
}
#sidebar-wrapper {
z-index: 1000;
position: fixed;
left: 250px;
width: 0;
height: 100%;
margin-left: -250px;
overflow-y: auto;
background-color: rgb(255, 255, 255);
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled #sidebar-wrapper {
width: 250px;
}
#page-content-wrapper {
width: 100%;
background-color: rgb(214, 214, 214);
position: absolute;
padding: 15px;
}
#wrapper.toggled #page-content-wrapper {
position: absolute;
margin-right: -250px;
}
/* Sidebar Styles */
.sidebar-nav {
position: block;
top: 0;
width: 250px;
margin: 0;
padding-top: 9px;
padding-left: 50px;
list-style: none;
text-align: left;
}
.sidebar-nav li {
list-style: none;
text-indent: 20px;
line-height: 40px;
}
.sidebar-nav li a.bez:before {
content: " " !important;
}
.sidebar-nav li a {
display: block;
line-height: 18px;
text-decoration: none;
color: #999999;
}
.sidebar-nav li a:hover {
text-decoration: none;
color: #000;
}
.sidebar-nav li a:active,
.sidebar-nav li a:focus {
text-decoration: none;
}
.sidebar-nav > .sidebar-brand {
font-size: 14px;
line-height: 30px;
}
.sidebar-nav > .sidebar-brand a {
color: #999999;
}
.sidebar-nav > .sidebar-brand a:hover {
color: #000;
background: none;
}
.sidebar-nav > .sidebar-links {
padding-left: 43px;
}
.sidebar-nav2 {
position: block;
top: 0;
width: 250px;
margin: 0;
padding-top: 60px;
padding-left: 80px;
list-style: none;
text-align: left;
list-style: none;
text-transform: lowercase;
}
.sidebar-nav2 li {
text-indent: 20px;
line-height: 24px;
}
.sidebar-nav2 li a {
display: block;
text-decoration: none;
color: #999999;
}
.sidebar-nav2 li a:hover {
text-decoration: none;
color: #000;
}
.sidebar-nav2 li a:active,
.sidebar-nav2 li a:focus {
text-decoration: none;
}
#media(max-width: 769px) {
#wrapper {
padding-top: 70px !important;
}
.sidebar-nav {
padding-top: 5px !important;
margin-top: 0;
}
.fb-language {
position: absolute;
bottom: 20px;
left: 65px;
z-index: 10;
}
}
#media(min-width:769px) {
#wrapper {
padding-left: 250px;
}
#wrapper.toggled {
padding-left: 0;
}
#sidebar-wrapper {
width: 250px;
}
#wrapper.toggled #sidebar-wrapper {
width: 0;
}
#page-content-wrapper {
padding: 20px;
position: relative;
background-color: rgb(214, 214, 214);
}
#wrapper.toggled #page-content-wrapper {
position: relative;
margin-right: 0;
}
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- Sidebar -->
<div class="navbar-header navbar-toggle">
<button href="#menu-toggle" class="btn btn-xs btn-default dropdown-toggle" id="menu-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</a>
</div>
<div id="sidebar-wrapper">
<div class="sidebar-nav">
<li class="sidebar-brand"><span class="brand"></span> ARCHITEKTURA</li>
<ul class="collapse" id="arch">
<li>jednorodzinne</li>
<ul class="collapse" id="jedno">
<li>dom opolski</li>
<li>dom 2</li>
<li>dom 3</li>
</ul>
<li>wielorodzinne</li>
<ul class="collapse" id="wielo">
<li>dom 1</li>
<li>dom 2</li>
<li>dom 3</li>
</ul>
<li>usługowe</li>
<ul class="collapse" id="uslu">
<li>przedszkole w Chróścicach</li>
<li>obiekt 2</li>
<li>obiekt 3</li>
</ul>
</ul>
<li class="sidebar-brand">PORT DESIGN</li>
<ul class="collapse" id="design">
<li>meble</li>
<ul class="collapse" id="meble">
<li>stół 1</li>
<li>stół 2</li>
<li>krzesło 1</li>
</ul>
<li>ceramika</li>
<ul class="collapse" id="ceramika">
<li>ceramika 1</li>
<li>ceramika 2</li>
<li>ceramika 3</li>
</ul>
<li>grafika</li>
<ul class="collapse" id="grafika">
<li>grafika 1</li>
<li>grafika 2</li>
<li>grafika 3</li>
</ul>
<li>inne</li>
<ul class="collapse" id="inne">
<li>inne 1</li>
<li>inne 2</li>
<li>inne 3</li>
</ul>
</ul>
<li class="sidebar-brand">PORT MIEJSCE</li>
<ul class="collapse" id="miejsce">
<li>kawiarnia</li>
<ul class="collapse" id="kawiarnia">
<li>kawa</li>
<li>śniadanie</li>
<li>wydarzenia</li>
</ul>
<li>coworking</li>
<ul class="collapse" id="coworking">
<li>coworking 1</li>
<li>coworking 2</li>
<li>coworking 3</li>
</ul>
<li>warsztat</li>
<ul class="collapse" id="warsztat">
<li>warsztat 1</li>
<li>warsztat 2</li>
<li>warsztat 3</li>
</ul>
<li>cennik</li>
</ul>
</div>
</div>
</div>

Answer 1

I'm using the wordpress bootstrap navwalker for using the bootstrap menu. You can easily edit the walker.
Try https://github.com/twittem/wp-bootstrap-navwalker
~ Neme

Answer 2

In WordPress, the menus are usually done by using the admin dashboard UI. Using appearance -> Menus.
The drop-down ability is done by indenting sub-menu items to the parent menu item. Then it's either you add you own JavaScript to manipulate how the current menu behave, or your current theme could be doing it exactly how you want it.
I'd look into using the right theme as well.