Develop Reference

How do I use hamburger-react-menu just on mobile or small screen?

I would like to have a mobile menu in my component, however, it should work only on mobile devices. After clicking on it options like Home, Furniture Chair... should appear. I have my hamburger-react-menu installed, but not sure how to go about this. Should I use media queries or purely react.js? The component code is below. Any tips will be greatly appreciated.
import React from 'react';
import PropTypes from 'prop-types';
import ProductSearch from '../../features/ProductSearch/ProductSearchContainer';
import styles from './MenuBar.module.scss';
const MenuBar = ({ children }) => (
<div className={styles.root}>
<div className='container'>
<div className='row align-items-center'>
<div className='col'>
<ProductSearch />
</div>
<div className={'col-auto ' + styles.menu}>
<ul>
<li>
<a href='#' className={styles.active}>
Home
</a>
</li>
<li>
<a href='#'>Furniture</a>
</li>
<li>
<a href='#'>Chair</a>
</li>
<li>
<a href='#'>Table</a>
</li>
<li>
<a href='#'>Sofa</a>
</li>
<li>
<a href='#'>Bedroom</a>
</li>
<li>
<a href='#'>Blog</a>
</li>
</ul>
</div>
</div>
</div>
</div>
);
MenuBar.propTypes = {
children: PropTypes.node,
};
export default MenuBar;

Using bootstrap can ease your pain, but as CanUver mentioned, if oyu want to show specific elements just for specific viewports, then media queries in css are then thing, you are looking for. You just specify since whne you wanna show the menu differently:
e.g.
#media only screen and (max-width: 490px) {
h1 { color: "pink"; }
}

How do i get the navbar to close when i click on a <a> link?

So I am using a pure CSS nav bar that uses a checkbox to overlay a navigation menu.
I am trying to get the navbar to close when I select the link.
For instance, when I click the contact link it should scroll down to the id"contact" that is on the same page, however, the page scrolls down while the navbar is still showing and so I have to manually click the checkbox to close it.
I have tried to solve this using some js but no luck :(
complete code link:
https://codepen.io/majorsyan/pen/Oqejox
<!-- Navigation code-->
<input type="checkbox" id="nav-toggle" class="checkbox" />
<label for="nav-toggle" class="nav-toggle-btn">
<span class="nav-icon-bar"></span>
</label>
<div class="overlay"></div>
<nav class="main-nav">
<ul class="nav-list">
<li class="nav-item">
Home
</li>
<li class="nav-item">
Portfolio
</li>
<li class="nav-item">
About
</li>
<li class="nav-item">
Contact
</li>
</ul>
</nav>

Setting the checked attribute on your checkbox should do the trick!
const links = document.querySelectorAll('.nav-item a')
const checkbox = document.querySelector('#nav-toggle')
for ( const link of links ) {
link.onclick = handleClick
}
function handleClick() {
checkbox.checked = false
}
Or, if you're using jQuery:
$('.nav-item a').click(hideOverlay)
function hideOverlay() {
$('#nav-toggle').prop('checked', false)
}
Hope this helps! :)

Vue SPA overrides dropdown

I'm building a, SPA with Vue JS, and I'm having some problems with my Sidebar component. The default functionality of my Dropdown - to open the submenu - is being overridden by Vue. When I click the anchor, the url is being updated as though I was clicking in a route.
I tried to add #click.stop, but it doesn't work.
Sidebar.vue
<template>
<div class="sidebar">
<div class="main-menu">
<div class="scroll">
<ul class="list-unstyled">
<li>
<a href="#start" data-target="#start" #click.stop>
<i class="iconsminds-shop-4"></i>
<span>Dore</span>
</a>
</li>
</ul>
</div>
</div>
<div class="sub-menu">
<div class="scroll">
<ul class="list-unstyled" data-link="start">
<li>
<a href="Dore.Start.html">
<i class="simple-icon-briefcase"></i> Start
</a>
</li>
</ul>
</div>
</div>
</div>
</template>
<script >
export default {
name: 'Sidebar',
data () {
return {
}
}
}
</script>

The question is a little ambiguous but if I understood you correctly, you're trying to prevent navigation from happening when you click on the a element?
If this is the case, try the prevent modifier (#click.prevent) instead of #click.stop as the latter will stop the event from propagating to parents, rather than preventing the default behaviour.
Docs: https://v2.vuejs.org/v2/guide/events.html#Event-Modifiers

Allowing user to customize the items on the list menubar

I've created a simple menu bar using bootstrap. now i want the user to be able to edit the items on the list including the links on the menu, add, delete etc. How do i do this using just frontend code like javascript etc?
Code:
<div id="sidebar">
<ul class="sidebar-nav">
<li class="sidebar-menu">
<a>MENU</a>
</li>
<li>
Link #1
</li>
<li>
Link #2
</li>
<li>
Link #3
</li>
<li>
Link #4
</li>
</ul>
</div>

What you're looking for is possible with vanilla Javascript, jQuery, or a host of other libraries. jQuery is where I'd recommend you start.
You can create new elements by passing html elements as strings to the jQuery function. See the "Creating New Elements" section of this page. Using append and remove as Muzammil mentioned, you can add and remove elements from the DOM.
I've created a small jsFiddle demonstrating some of the functions I'm talking about and how you might use them. This is a limited demo that doesn't include every feature you'd want for a full implementation, but uses some of the pertinent jQuery functions.
HTML
<div id="sidebar">
<ul class="sidebar-nav">
<li class="sidebar-menu">
<a>MENU</a>
</li>
<li>
Link #1
<button class="delete-link">Delete</button>
</li>
<li>
Link #2
<button class="delete-link">Delete</button>
</li>
<li>
Link #3
<button class="delete-link">Delete</button>
</li>
<li>
Link #4
<button class="delete-link">Delete</button>
</li>
</ul>
<div class="input-field">
<label for="link-title">Enter link title</label>
<input type="text" class="link-title" name="link-title" placeholder="link Title" />
</div>
<div class="input-field">
<label for="link-title">Enter link URL</label>
<input type="url" class="link-url" name="link-url" />
</div>
<input type="submit" class="add-button" value="Add" />
</div>
Javascript w/ jQuery
var $addButton = $('.add-button');
var $sidebarMenu = $('.sidebar-nav');
// Add the event handlers
$(document).on('click', '.delete-link', removeLink);
$addButton.on('click', addLink);
function removeLink(e) {
// Remove the parent <li> element of the clicked link
var $link = $(e.currentTarget).closest('li');
$link.remove();
}
function addLink(e) {
e.preventDefault();
var $linkTitle = $('.link-title');
var $linkUrl = $('.link-url');
// Create the new link element using values from text inputs
var $link = $('<li>').append(
$('<a>').attr('href', $linkUrl.val()).text($linkTitle.val()));
// Add a delete button for the link
$link.append($('<button>').addClass('delete-link').text('Delete'));
$sidebarMenu.append($link);
// Reset the text inputs
$linkTitle.val('');
$linkUrl.val('');
}

you can use jquery to achieve this, the following function will help you : append, remove, html, text

dynamically update breadcrumb & highlight active color

I am sorry for the title. I don't no how to write the title for the below scenario .
The below question would be easier for an expert. Kindly bear with my English.
I am creating a single page portfolio. In the web site I have top menu,breadcrumb,content & footer.
If i click any menu or submenu the corresponding div is loading properly but I want to change my breadcrumb dynamically based on the menu
Here is the HTML code for top menu
<div id="eyMenuNav">
<ul id="navmenu">
<li class="on">
<a class='link1' href="#first">Article on Technology</a></li>
<li>
<a class="sub" href="#">Success Stories</a>
<ul>
<li>
<a class='link2' href="#second" onclick="onctext();">Customer Quotes</a>
</li>
<li>
<a class='link3' href="#third" onclick="onctext();">CSS, Appreciation - Metrics</a>
</li>
<li>
<a class='link4' href="#four" onclick="onctext();">Lesson Learnt</a>
</li>
</ul>
</li>
<li>
<a class='link5' href="#five">Hexaware Key Contributor</a>
</li>
</ul>
</div>
Here is the HTML code for breadcrumb
<div id="eyBreadCrumb">
<ul>
<li>
<a id="crumb" href="#"><!-- Here I need update my breadcrumb based on the link which i clicked -></a>
</li>
</ul>
<!-- Clearing Element -->
<div style="clear:both;"></div>
<!-- end breadcrumb --> </div>
Here Is the code for javascript which i tried it is working for one menu click but i want for all.
function onctext()
{
document.getElementById("crumb").innerHTML="Success Stories - Customer Quotes";
}
Kindly help me for the above scenario
Note : I am not using jquery only iam working with javascript.
Thanks
Mahadevan

Add this parameter to your onctext() call, so your menu items look like so:
<a class='link3' href="#third" onclick="onctext(this);">CSS, Appreciation - Metrics</a>
And then change your onctext function to retrieve the text from this:
function onctext(elm) {
var text = elm.innerHTML;
document.getElementById("crumb").innerHTML = text;
// set active class
var active = document.getElementsByClassName('active')[0];
if (active) {
active.className = active.className.replace(' active', '');
}
elm.className += ' active';
}