I want to disable main menu item in sub page using it's id. Tried "setAttribute" and "disabled" options.
document.getElementById("bloc_menu:j_id14").setAttribute("disabled","disabled");
document.getElementById("bloc_menu:j_id14").disabled = true;
Any suggestions are welcome, thank u.
I'm still not 100% sure what you're trying to do or why you can't handle this serverside, but I've made a little example of a simple menu that can be disabled/enabled.
var $mainMenu, $links;
$(function() {
$mainMenu = $('#main-menu');
$links = $mainMenu.find('.menu-item__link').each(function() {
var $link = $(this);
$link.data('href', $link.attr('href'));
});
$('#toggle-main-menu').on('click', function() {
toggleMainMenu();
});
});
function toggleMainMenu() {
if ($mainMenu.hasClass('disabled')) {
$mainMenu.removeClass('disabled');
restoreLinks();
}
else {
$mainMenu.addClass('disabled');
removeLinks();
}
}
function removeLinks() {
$links.removeAttr('href');
}
function restoreLinks() {
$links.each(function() {
var $link = $(this);
$link.attr('href', $link.data('href'));
});
}
#main-menu .menu-item__link {
color: #000;
}
#main-menu.disabled .menu-item__link {
color: #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="main-menu">
<li class="menu-item">
<a class="menu-item__link" href="#someLink1">Some link 1</a>
</li>
<li class="menu-item">
<a class="menu-item__link" href="#someLink2">Some link 2</a>
</li>
<li class="menu-item">
<a class="menu-item__link" href="#someLink3">Some link 3</a>
</li>
</ul>
<button id="toggle-main-menu">Toggle the menu</button>
Related
I'm new to Odoo .. I want to make my dropdown toggle display properties set to block only in my home page like this :
So, at other pages, it will set to none to prevent the dropdown override the content like this:
Here is what I've done so far with the code:
views/header.xml
<nav class="navbar navbar-expand-lg navbar-dark multilevel">
<ul class="navbar-nav w-100">
<li class="nav-item dropdown w-100">
<a class="nav-link dropdown-toggle nav-category" href="#"
data-bs-toggle="dropdown">
<i class="icon-view-grid"></i>
<span class="ic-category"></span>
Semua Kategori
</a>
<ul class="dropdown-menu dropdown-category show">
<div href="javascript:void(0)" class="close-category">
<i class="icon-x-circle"></i>
Tutup
</div>
<t t-foreach="product_categories" t-as="category">
<li class="has-submenu">
<a class="dropdown-item dropdown-toggle" t-attf-href="/products?categ={{ category.id }}">
<t t-if="category.image_1920">
<img class="image-category-icon" t-attf-src="/web/image/product.public.category/{{ category.id }}/image_1920"/>
</t>
<span t-esc="category.name"/>
</a>
<div class="megasubmenu dropdown-menu">
<ul class="list-unstyled">
<t t-foreach="category.child_id" t-as="second_level_category">
<t t-if="second_level_category.id">
<li>
<h3 class="content-title f-18"><a t-attf-href="/products?categ={{ second_level_category.id }}"><span t-esc="second_level_category.name"/></a></h3>
</li>
</t>
</t>
</ul>
</div>
</li>
</t>
<li>
<a class="dropdown-item text-center view-all"
href="/products">Lihat Semua Kategori
<i class="icon-arrow-right"></i>
</a>
</li>
</ul>
</li>
</ul>
</nav>
custom-style.css
.dropdown-item.active,
.dropdown-item:active {
color: #fff;
text-decoration: none;
background-color: #e5e5e5;
}
.dropdown-menu {
box-shadow: 0px 4px 35px rgba(70, 70, 70, 0.1);
border: 1px solid #d1d1d1;
}
main.js
//CATEGORY MENU
document.addEventListener("DOMContentLoaded", function () {
/////// Prevent closing from click inside dropdown
document.querySelectorAll('.dropdown-menu').forEach(function (element) {
element.addEventListener('click', function (e) {
e.stopPropagation();
});
});
// make it as accordion for smaller screens
if (window.innerWidth < 992) {
// close all inner dropdowns when parent is closed
document.querySelectorAll('.navbar .dropdown').forEach(function (everydropdown) {
everydropdown.addEventListener('hidden.bs.dropdown', function () {
// after dropdown is hidden, then find all submenus
this.querySelectorAll('.submenu').forEach(function (everysubmenu) {
// hide every submenu as well
everysubmenu.style.display = 'none';
});
});
});
document.querySelectorAll('.dropdown-menu a').forEach(function (element) {
element.addEventListener('click', function (e) {
let nextEl = this.nextElementSibling;
if (nextEl && nextEl.classList.contains('submenu')) {
// prevent opening link if link needs to open dropdown
e.preventDefault();
console.log(nextEl);
if (nextEl.style.display == 'block') {
nextEl.style.display = 'none';
} else {
nextEl.style.display = 'block';
}
}
});
});
} else if (window.location.pathname === '/') { // Check if the current URL is home page
// display all submenus
document.querySelectorAll('.submenu').forEach(function (everysubmenu) {
everysubmenu.style.display = 'block';
});
}
});
Is there any possible way to address this kind of stylesheet logics in JS than the built-in window.location.pathname and how to implement that, especially in Odoo, which is basicly using the markup of XML instead of HTML??
Any help would be very appreciated.
Thank a lot in advance.
Having trouble closing the Menu after clicking the hamburger button. What's the best way to close the entire menu screen once any of the items are clicked?
My HTML is:
`<body>
<div class="menu-wrap">
<input type="checkbox" class="toggler">
<div class="hamburger">
<div></div>
</div>
<div class="menu">>
<div>
<div>
<ul>
<li>Home</li>
<li>About</li>
<li>Menu</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</div>`
I've tried using jQuery but havent had success. Here's the js code:
`$('.toggler').on('click', function () {
$('.menu').toggleClass('open');
});
$('.menu li').on("click", function () {
$('.menu-wrap').toggleClass('open');
});`
Or if there's a simpler way using CSS to close the menu?
Here's the codepen to run: https://jsfiddle.net/7rmcx861/#&togetherjs=g5zDdkhjc5
https://jsfiddle.net/h7et0qnv/
this menu style work on input chechbox situation. If checked your hamburger menu get visible else get hidden . so just need to change its situation
wrote one function in your script.
function toggle(){
$(".toggler").prop("checked", false);
}
then put this function to onclick event of menu list
<li><a onclick="toggle()" href="#Home">Home</a></li>
<li><a onclick="toggle()" href="#About">About</a></li>
<li><a onclick="toggle()" href="#">Menu</a></li>
<li><a onclick="toggle()" href="#">Contact</a></li>
If you want to do it with vanilla js, I would suggest you to use CustomEvents. There might be other ways of doing it in frameworks like React.
For every menu item I would emit a custom event -
var menuItems = document.querySelectorAll('.menu li');
for (var i = 0; i < menuItems.length; ++i) {
menuItems[i].addEventListener('click', function(e) {
var closeEvent = new CustomEvent('closeMenu', {
bubbles: true,
});
e.currentTarget.dispatchEvent(closeEvent);
});
}
The 'menu' can then react to this custom event and close itself if open -
var menu = document.querySelector('.menu')
if (menu) {
menu.addEventListener('closeMenu', function (e) {
e.currentTarget.classList.remove('open');
});
}
You can have the usual menu 'toggler' for opening and closing the menu when it is clicked.
Update:
I figured things were not very clear. So here I am adding some sample code.
Note: I added the toggler and subsequently changed the menu eventHandler slightly.
var menuItems = document.querySelectorAll('.menu li');
for (var i = 0; i < menuItems.length; ++i) {
menuItems[i].addEventListener('click', function(e) {
var closeEvent = new CustomEvent('closeMenu', {
bubbles: true,
});
e.currentTarget.dispatchEvent(closeEvent);
});
}
var menu = document.querySelector('.menu')
var toggler = document.querySelector('.toggler')
if (menu && toggler) {
menu.addEventListener('closeMenu', function(e) {
menu.classList.remove('open');
toggler.checked = false;
});
toggler.addEventListener('click', function(e) {
menu.classList.toggle('open');
});
}
.menu {
background-color: white;
display: inline-block;
padding-right: 1rem;
}
.menu.open {
visibility: visible;
}
.menu {
visibility: hidden;
}
<div class="menu-wrap">
<input type="checkbox" class="toggler" checked>
<div class="hamburger">
<div></div>
</div>
<div class="menu open">
<div>
<div>
<ul>
<li>Home</li>
<li>About</li>
<li>Menu</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</div>
I am making a dropdown menu in a dropdown, I want that I have a few head items and if you click on one, the dropdown in that head item is displayed as a block element. But the problem is that they all have the same class and when I want to add a class all the dropdowns inside the head items get that class. What am I doing wrong here?
jQuery(document).ready(function(){
var click = false;
jQuery(".navbar-collapse .nav li").click(function() {
if(click == false) {
jQuery(".navbar-collapse .nav li ul").addClass('clicked');
click = true;
} else {
jQuery(".navbar-collapse .nav li ul").removeClass('clicked');
click = false;
}
});
});
.clicked {
display: block !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav menu">
<li class="item-101 default deeper parent">
Home
<ul class="nav-child unstyled small clicked">
<li class="item-124">
Maandmail
</li>
</ul>
</li>
<li class="item-102 default deeper parent">
Contact
<ul class="nav-child unstyled small clicked">
<li class="item-125">
Contact pagina
</li>
</ul>
</li>
</ul>
Does anyone know why this is happening and how to fix this issue?
You have to make the code look at the specific UL relative to the item you've clicked on:
jQuery(document).ready(function() {
var click = false;
jQuery(".navbar-collapse .nav li").click(function(e) {
if (click == false) {
jQuery(e.currentTarget).find("ul").addClass('clicked');
click = true;
} else {
jQuery(e.currentTarget).find("ul").removeClass('clicked');
click = false;
}
});
});
I have a problem with my menu in mobile mode. onClick it fadesOut. I want to keep this setting, but I don't want it to fadeOut when one clicks on the dropdown part.
here is link: http://jsfiddle.net/zLLzrs6b/3/
appreciate your help!
html:
<nav id="nav-wrap"> <a class="mobile-btn" href="#nav-wrap" title="Show navigation">Show Menu</a>
<a class="mobile-btn" href="#" title="Hide navigation">Hide Menu</a>
<ul id="nav" class="nav">
<li><a class="smoothscroll mobile" href="#about">about</a>
</li>
<li><a class="smoothscroll mobile" href="#documents">blog</a>
</li>
<li class="nav-item">dropdown
<ul class="langop">
<li>otion 1
</li>
<li>otion 2
</li>
</ul>
</li>
</ul>
</nav>
css:
.langop {
display:none;
position: relative;
width:auto;
}
.nav-item:hover .langop {
display: block;
}
java:
var toggle_button = $("<a>", {
id: "toggle-btn",
html: "Menu",
title: "Menu",
href: "#"
});
var nav_wrap = $('nav#nav-wrap')
var nav = $("ul#nav");
nav_wrap.find('a.mobile-btn').remove();
nav_wrap.prepend(toggle_button);
toggle_button.on("click", function (e) {
e.preventDefault();
nav.slideToggle("fast");
});
if (toggle_button.is(':visible')) nav.addClass('mobile');
$(window).resize(function () {
if (toggle_button.is(':visible')) nav.addClass('mobile');
else nav.removeClass('mobile');
});
$('ul#nav li a').on("click", function () {
if (nav.hasClass('mobile')) nav.fadeOut('fast');
});
See this demo.
$('ul#nav > li > a').on("click", function () {
if (nav.hasClass('mobile'))
nav.fadeOut('fast');
});
Find the clicked element by using event.target, if it's dropdown part then don't hide
var toggle_button = $("<a>", {
id: "toggle-btn",
html: "Menu",
title: "Menu",
href: "#"
});
var nav_wrap = $('nav#nav-wrap')
var nav = $("ul#nav");
nav_wrap.find('a.mobile-btn').remove();
nav_wrap.prepend(toggle_button);
toggle_button.on("click", function(e) {
e.preventDefault();
nav.slideToggle("fast");
});
if (toggle_button.is(':visible')) nav.addClass('mobile');
$(window).resize(function() {
if (toggle_button.is(':visible')) nav.addClass('mobile');
else nav.removeClass('mobile');
});
$('ul#nav li a').on("click", function(e) {
var target = $(".langop");
if (!target.is(e.target) //checking clicked item is the dripdown list
&& target.has(e.target).length === 0 //chekking clicked element is inside the dropdown
&& nav.hasClass('mobile')) {
nav.fadeOut('fast');
}
});
.langop {
display: none;
position: relative;
width: auto;
}
.nav-item:hover .langop {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<nav id="nav-wrap">
<a class="mobile-btn" href="#nav-wrap" title="Show navigation">Show Menu</a>
<a class="mobile-btn" href="#" title="Hide navigation">Hide Menu</a>
<ul id="nav" class="nav">
<li><a class="smoothscroll mobile" href="#about">about</a>
</li>
<li><a class="smoothscroll mobile" href="#documents">blog</a>
</li>
<li class="nav-item">dropdown
<ul class="langop">
<li>otion 1
</li>
<li>otion 2
</li>
</ul>
</li>
</ul>
</nav>
I have a sidebar with collapsible menu it works fine but all the values come expanded the initial loading time.I want it to be closed on load and toggled thereafter.
Here is the jquery used
// Sidebar Toggle
var fluid = {
Toggle : function(){
var default_hide = {"grid": true };
$.each(
["pagesnav", "commentsnav", "userssnav", "imagesnav"],
function() {
var el = $("#" + (this == 'accordon' ? 'accordion-block' : this) );
if (default_hide[this]) {
el.hide();
$("[id='toggle-"+this+"']").addClass("hidden");
}
$("[id='toggle-"+this+"']")
.bind("click", function(e) {
if ($(this).hasClass('hidden')){
$(this).removeClass('hidden').addClass('visible');
el.slideDown();
} else {
$(this).removeClass('visible').addClass('hidden');
el.slideUp();
}
e.preventDefault();
});
}
);
}
}
jQuery(function ($) {
if($("[id^='toggle']").length){fluid.Toggle();}
});
here is the html
<span class="ul-header"><a id="toggle-pagesnav" href="#" class="toggle visible">Content</a></span>
<ul id="pagesnav">
<li><a class="icn_manage_pages" href="#">Manage Pages</a></li>
<li><a class="icn_add_pages" href="#">Add Pages</a></li>
<li><a class="icn_edit_pages" href="#">Edit Pages</a></li>
<li><a class="icn_delete_pages" href="#">Delete Pages</a></li>
</ul>
<!-- End Content Nav -->
<!-- Start Comments Nav -->
<span class="ul-header"><a id="toggle-commentsnav" href="#" class="toggle visible">Comments</a></span>
<ul id="commentsnav">
<li><a class="icn_manage_comments" href="#">Manage Comments</a></li>
<li><a class="icn_add_comments" href="#">Add Comments</a></li>
<li><a class="icn_edit_comments" href="#">Edit Comments</a></li>
<li><a class="icn_delete_comments" href="#">Delete Comments</a></li>
</ul>
here is the css used
.toggle {
display:block;
}
.ul-header a.visible {
background:url('../img/icons/small/toggle_close.png') no-repeat scroll 97% 50%;
}
.ul-header a.hidden {
background:url('../img/icons/small/toggle_open.png') no-repeat scroll 97% 50%;
}
Please help.
This is the variable which is checked against to see if a block has to be hidden or not.
var default_hide = {"grid": true };
Change it to
var default_hide = {"pagesnav": true, "commentsnav": true, "userssnav": true, "imagesnav": true}
and it should work.
Or you can remove this if:
if (default_hide[this])
I'd say the most efficient and painfree way to have them all initially collapsed is to specify them like that initially in the HTML. So add class="hidden" to each of your nav ul-s.