Html - Expand submenu on click of anchor tag and svg

kangkong
October 6, 2023
194 views
1 vote
2 Answers

I am creating an submenu that expands when clicked on the anchor tag or the svg. I have used a javascript to achieve this. The problem I’m facing is, only either of them is working at a time. I tried wrapping them in single divs and added new classes to target the elements but there is no success. I even tried the querySelectorAll to target both of them at once but still there was an error. How do I achieve this? I am attaching part of my code below. The below code if the very basic approach. If needed I can share code where I have used wrapper.

const searchb = document.querySelector("b1000");
const subMenu = document.getElementById("nav2-seachex");


searchb.addEventListener("click", function() {
  subMenu.style.right = "0";
});


subMenu.addEventListener("click", function(event) {
  event.stopPropagation();
});

#nav2-seachex {
  position: fixed;
  top: 0;
  left: -700px;
  width: 100%;
  max-width: 1300px;
  height: 100%;
  background-color: rgb(247, 3, 3);
  z-index: 999;
}

.nav2-search svg {
  width: 24px;
  height: 24px;
  cursor: pointer;
}

<div class="nav2-search">
  <a class="b1000" href="">search</a>

  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
    <rect width="256" height="256" fill="none"/>
    <circle cx="116" cy="116" r="84" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="14"/>
    <line x1="175.4" y1="175.4" x2="224" y2="224" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="14"/>
  </svg>
</div>

<div id="nav2-seachex">
  <a href="">x</a>
</div>

Answers

const 
  searchb = document.querySelector('.nav2-search')
, subMenu = document.querySelector('#nav2-seachex')
  ;
searchb.addEventListener('click', e => // for any element inside
  {
  e.stopPropagation()
  subMenu.style.left = '0';
  });
subMenu.addEventListener('click', e => 
  {
  e.preventDefault();   // disable reload in case of click on link element
  subMenu.style.left = '-700px';
  });

#nav2-seachex {
  position   : fixed;
  top        : 0;
  left       : -700px;
  width      : 100%;
  max-width  : 1300px;
  height     : 100%;
  background : rgb(247, 3, 3);
  z-index    : 999;
  }
.nav2-search {
  cursor  : pointer;
  }
.nav2-search  > * {
  vertical-align: top;
  }
.nav2-search svg {
  width   : 24px;
  height  : 24px;
  }
.nav2-search svg circle ,
.nav2-search svg line   {
  fill            : none;
  stroke          : #000; 
  stroke-linecap  : round; 
  stroke-linejoin : round; 
  stroke-width    : 14;
  }

<div class="nav2-search">
  <span>search</span>
  <svg viewBox="0 0 256 256">
    <circle cx="116" cy="116" r="84" />
    <line x1="175.4" y1="175.4" x2="224" y2="224" />
  </svg>
</div>

<div id="nav2-seachex">
  <a href="">x</a>
</div>

You can simplify your code by wrapping the <svg> icon in a button – so you only need one event listener for the button.

Besides, prefer <button> over <a> elements if you need to trigger some action instead of an actual link/anchor jump. This way you also don’t need to disable default link behavior via preventDefault().

Here’s a common approach for a nav toggle functionality – based on class toggling/replacements.

/**
* you can also assign unique IDs to your buttons 
* and query them via `getElementById()`
*/
let btnOpen = document.querySelector('.btn-open')
let btnClose = document.querySelector('.btn-close')
let nav = document.getElementById('nav2-seachex')

btnOpen.addEventListener('click', e=>{
  nav.classList.toggle('nav-open');
})

btnClose.addEventListener('click', e=>{
  nav.classList.remove('nav-open');
})

body{
  font-size: 10vmin;
}

/* define/override default button styles */
.btn-default{
  background: none;
  border:none;
  font-size:inherit;
  line-height: 1em;
  cursor: pointer;
}

/* make svg icon behave like an inline icon font glyph */
.svg-icon{
  height: 1em;
  display:inline-block;
  /* optional: add a baseline shift via transform */ 
  transform: translateY(0.2em);
}

.nav2-seachex {
  position: fixed;
  top: 0;
  left: 0;
  transform: translateX(-100%);
  width: 100%;
  height: 100%;
  max-width: 1300px;
  background-color: rgb(247, 3, 3);
  z-index: 999;
  /* enable smooth transitions between open and closed state */
  transition: 0.3s
}

/* nav is open */
.nav-open{
  transform: translateX(0%);
}

<button class="btn-default btn-open" type="button" aria-label="open nav">search
  <svg class="svg-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="none" stroke="#000" stroke-width="14">
    <circle cx="116" cy="116" r="84" />
    <line x1="175.4" y1="175.4" x2="224" y2="224" stroke-linecap="round" />
  </svg>
</button>

<div class="nav2-seachex" id="nav2-seachex">
  <button class="btn-default btn-close" id="btn-close" type="button" aria-label="close nav">x</button>
</div>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – Expand submenu on click of anchor tag and svg

Answers