Navigate through the website by transforming the arrow and clicking the link

I am struggling with transitioning my arrow from › (right) to ˇ (down) when toggled. I can't figure out where to place it.

If you look at Menu 1 > Submenu 1 > Text with hyperlink

I want the 'Text with Hyperlink' to be clickable on the entire box instead of just the word itself.

I'm feeling lost and frustrated. I don't have much knowledge in this area. I hope you understand what I'm trying to achieve. Thank you.

This is what I've been attempting - The arrow transition and making subitems clickable beyond just the word (Menu > Submenu > Subitem)

$('.toggle').click(function(e) {
    e.preventDefault();
  
    var $this = $(this);
  
    if ($this.next().hasClass('show')) {
        $this.next().removeClass('show');
        $this.next().slideUp(350);
    } else {
        $this.parent().parent().find('li .inner').removeClass('show');
        $this.parent().parent().find('li .inner').slideUp(350);
        $this.next().toggleClass('show');
        $this.next().slideToggle(350);
    }
});
* {
  font-family: "Brandon Bold",Helvetica,Arial,sans-serif !important;
  font-size: 15px;
  letter-spacing: 0.05em;
}
.accordion {
  width: 99%;
  padding: 0;
  margin: auto;
}
a {
  text-decoration: none;
  color: inherit;
}
p {
  font-size: 1.1em;
  margin: 1em 0;
}
.description {
  margin: 1em auto 2.25em;
}

ul {
  list-style: none;
  padding: 0;
}
ul .inner {
  padding-left: 1em;
  overflow: hidden;
  display: none;
}
ul .inner.show {
  /*display: block;*/
}
ul li {
  margin: 0.3em 0;
}
ul li a.toggle {
  display: block;
  border-bottom: 1px solid #575757;
  color: #000000;
  padding: 0.75em;
  transition: background 0.3s ease;
}
ul li a.toggle:hover {
  color: #fefefe;
  background: rgba(0, 0, 0, 0.9);
  border-radius: 0.15em;
}

.subnotoggle {
  padding: 0.75em 0 0.75em 0.75em;
  border-bottom: 1px solid #575757;
}

.toggle::before {
  content: '\203A';
  font-size: 20px;
  float: right;
  margin-right: 15px;
}

.notoggle li {
  padding: 0.75em 0 0.75em 0.75em;
  border-bottom: 1px solid #575757;
}

.notoggle li a {
  padding-left: 1.3em;
}

.notoggle li::before {
  content: '\2012';
  font-size: 15px;
  margin-left: 15px;
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
}

.notoggle li:hover::before {
  content: '\203A';
  font-size: 17px;
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
}
<ul class="accordion">
  <li>
    <a class="toggle" href="javascript:void(0);">Menu 1</a>
    <ul class="inner">
      <li>
        <a href="#" class="toggle">Sub Menu 1</a>
        <div class="inner">
          <ul class="notoggle">
            <li><a href="#">Text with Hyperlink 1</a></li>
            <li><a href="#">Text with Hyperlink 2</a></li>
            <li><a href="#">Text with Hyperlink 3</a></li>
          </ul>
        </div>
      </li>
      
      <li>
        <a href="#" class="toggle">Sub Menu 2</a>
        <div class="inner">
          <p>
            Children will automatically close upon closing its parent.
          </p>
        </div>
      </li>
      
      <li class="subnotoggle">Sub Menu 3</li>
    </ul>
  </li>
  
  <li>
    <a class="toggle" href="javascript:void(0);">Menu 2</a>
    <ul class="inner">
      <li>
        <a href="#" class="toggle">Sub Menu 1</a>
        <ul class="inner">
          <li>
            <a href="#" class="toggle">Another Sub</a>
            <div class="inner">
              <p>
                As long as the inner element has inner as one of its classes then it will be toggled.
              </p>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempus placerat fringilla. Duis a elit et dolor laoreet volutpat. Aliquam ultrices mauris id mattis imperdiet. Aenean cursus ultrices justo et varius. Suspendisse aliquam orci id dui dapibus
                blandit. In hac habitasse platea dictumst. Sed risus velit, pellentesque eu enim ac, ultricies pretium felis.
              </p>
            </div>
          </li>
        </ul>
      </li>
      
      <li class="subnotoggle">Submenu 2</li>
      
      <li class="subnotoggle">Sub Menu 3</li>
    </ul>
  </li>
</ul>

 <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script  src="./script.js"></script>

Answer №1

You're in luck!

For optimal control, make sure to utilize position: relative on the parent element and position: absolute on the child element. This approach is much more efficient than dealing with float and offers smoother handling when it comes to transforms and animations.

Additionally, keep in mind that a pseudo-element acts as a child of the element from which it originates. This means you can absolutely position a pseudo-element within the boundaries of its relatively positioned parent element.

This should align closely with your requirements. If you desire a hover effect for changing background color, simply replicate the existing code. All the necessary components are already in place.

$('.toggle').click(function(e) {
    e.preventDefault();
  
    var $this = $(this);
  
    if ($this.hasClass('toggled')) {
      $this.removeClass('toggled') 
    } else { 
      $this.addClass('toggled'); 
    }
  
    if ($this.next().hasClass('show')) {
        $this.next().removeClass('show');
        $this.next().slideUp(350);
    } else {
        $this.parent().parent().find('li .inner').removeClass('show');
        $this.parent().parent().find('li .inner').slideUp(350);
        $this.next().toggleClass('show');
        $this.next().slideToggle(350);
    }
});
* {
  font-family: "Brandon Bold",Helvetica,Arial,sans-serif !important;
  font-size: 15px;
  letter-spacing: 0.05em;
}
/* Additional CSS styles */
...
<ul class="accordion">
   <!-- HTML markup -->
</ul>

 <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script  src="./script.js"></script>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Send binary information using Prototype Ajax request

Currently, I am utilizing Prototype to send a POST request, and within the postdata are numerous fields. One of these fields contains binary data from a file, such as an Excel spreadsheet chosen by the user for upload. To retrieve the contents of the file ...

Dynamic Height in React Material-UI Table with Sticky Headers and Multiple Rows

Currently, I am working with React and Material-UI to create a table that needs to have a sticky header for a multi-row table head. The challenge I'm facing is that I don't want to specify a fixed height for the table, but instead have all lines ...

The MUI Slide Transition experiences a malfunction when using multiple Slide components simultaneously

I'm having trouble getting the animations to work for each mui Slide when the button is clicked. It seems like they don't want to cooperate and work together. Oddly enough, if you disable one of the slides, the other one starts working fine, but ...

SolidJS seems to be behaving strangely by rendering content twice when incorporating routing

Just diving into SolidJS and came across an issue where my app seems to be rendering twice. I have a hunch that this has to do with how I'm handling routing. To demonstrate the problem, I've put together a simple example: app.tsx import { Suspen ...

Incorporating React State into CSS Styles

Currently, I am immersed in a project based on NextJS where I have to utilize React State to determine the width of a div. In the existing setup, this calculation takes place within a .tsx file using constants and is incremented upon clicking a button. The ...

Encountered a problem loading resources - code 500 malfunction detected

I am encountering an issue where I consistently receive a 500 Internal Server Error message in the developer console for all CSS, image, and JS files: Failed to load resource: the server responded with a status of 500 (Internal Server Error) Despite doub ...

What is the process for extracting a single hashtag using the Twitter API with JSON in JavaScript?

Currently, I am utilizing the npm package 'twit' in conjunction with node js to interact with the Twitter API. My goal is to retrieve the hashtags used by a specific user in their most recent tweets. By employing the following code snippet, I ca ...

I'm having trouble with my Express server routes not being accessed. The browser is displaying an error message saying 'No Data Received ERR_EMPTY_RESPONSE

I've encountered an issue with my express server while setting up an email service. Despite troubleshooting and simplifying the code to a basic 'hello world' example, the problem persists. No routes are functioning properly – requests made ...

There seems to be a hitch in the functioning of the JavaScript codes

I'm having trouble calculating the amount using jQuery. Could someone please review my code and let me know what's wrong? Here are my Javascript and jQuery codes: After making changes: $(document).ready(function() { $('.home_banner&ap ...

Tips for avoiding an endless loop in my React code while utilizing setState within useEffect

Make sure to view the code on codesandbox at this link: https://codesandbox.io/s/bold-hamilton-k1nzs When I execute the code, it triggers an endless loop, causing the entries to grow rapidly. Eventually, the website crashes due to this issue. The state v ...

Troubleshooting issues with cross-domain jQuery ajax requests

Struggling with this code and unable to make it work. This call consistently returns a "Failed to load resource: the server responded with a status of 401 (Unauthorized)" error message. $('#btnZendesk').click(function () { $.ajax({ ...

Attempting to crack the code within body-parser and Node.js

I am just getting started with Node.js & Express and trying to follow a tutorial at https://github.com/jw84/messenger-bot-tutorial. I have a good understanding of most parts, but I'm confused about the use of "entry" and "messaging" in this code snipp ...

In Internet Explorer 8, angular's $window service may sometimes return undefined

I've developed a custom directive called slideshow with some scope variables that are two-way bound to ng-style. This directive functions as a responsive carousel that adjusts based on the window height retrieved using the $window service. During tes ...

What is preventing SVG textPath from displaying properly? [Empty output in devtools]

I found this interesting code snippet on Mozilla and decided to incorporate it into a Vue component. <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <path id="MyPath" fill="none" stroke="red" d="M10,90 Q90,90 90,45 Q90,10 ...

What could be the reason for my flex items not shrinking when the browser window size is decreased?

Here is the CSS code for the header component using flexbox: .header { display: flex; flex-direction: row; justify-content: space-between; padding: 15px 20px; background-color: #ffffff; position: sticky; top: 0; z-index: ...

Can React JSX and non-JSX components be combined in a single project?

I'm currently faced with a question: If I have a parent component in JSX but need to include an HTML tag like <i class="fa fa-window-maximize" aria-hidden="true"></i>, which is not supported by React JSX (correct me if I'm wrong), can ...

What steps can I take to stop a browser from triggering a ContextMenu event when a user performs a prolonged touch

While touch events are supported by browsers and may trigger mouse events, in certain industrial settings, it is preferred to handle all touch events as click events. Is there a way to globally disable context menu events generated by the browser? Alternat ...

Sending data from PHP to JavaScript using JSON encoding through POST requests

I am dealing with a multi-dimensional array that needs to be passed to a PHP script using JavaScript to parse JSON data and display it on Google Maps. I am experimenting with using forms to achieve this: <?php $jsontest = array( 0 => array( ...

unable to assign the disable property to a button element

In the code snippet below, I am working on a child-component. I have created a button and I want to include a disable property. However, the current implementation of the code results in an error message with red underlining indicating: Type '"is ...

What are all the functionalities provided by jquery select?

Currently, I am venturing into testing out a new jQuery plugin. let myPlugin = new MyPlugin(); $(#myPlugin).someFunction(); console.log($(myPlugin)) I'm curious - is there a way for me to see a full list of the available functions/methods for me to ...