Angular: Creating a Sliding Menu with a Hamburger Icon

I have been attempting to implement a slide out menu from a span within my navigation bar, but I am encountering some challenges. Despite searching on Google, I have not been able to find the solution I need. Here is the code I am currently using:

<div style="background-color: #002F33; min-height:50px;">
    <span class="navIcon" style="width: 50px; border-right-style: solid 1px #939393;"><img src="assets/images/icon_hamburger.png"></span>
    <div>
        <a href="#Link1">Link1</a>
        <a href="#Link2">Link2</a>
        <a href="#Link3">Link3</a>          
    </div>
    <span style="color: #ffffff; font-size: 22px; padding-left:20px; padding-top: 21px;">Moneyball Tool</span>>
</div>

My goal is to have the menu fly out over the content below when the span image is clicked. I'm struggling with this implementation and would greatly appreciate any assistance you can provide.

javascripthtmlcssangularjs

Answer №1

Incorporating ids into specific divs along with utilizing javascript to toggle a custom css class

.menu_items_toggle {
  opacity: 1 !important;
  top: 100% !important;
}

Check out the code snippet below

// Accessing the container holding all link elements
var menu_item_container = document.getElementById("menu_items")

// Function to show/hide menu options when image is clicked
function clicker() {
  menu_item_container.classList.toggle('menu_items_toggle');
  console.log(menu_item_container.classList.contains('menu_items_toggle'))


}
console.log(document.getElementById("span_img_container"));
document.getElementById("menu_img").addEventListener('click', clicker)
#menu {
  position: relative;
}
#menu_items {
  position: absolute;
  top: 0%;
  opacity: 0;
  transition: all 0.5s;
}
.menu_items_toggle {
  opacity: 1 !important;
  top: 100% !important;
}
img {
  width: 100px;
  height: 100px;
}
<div id="menu" style="background-color: #002F33; min-height:50px;">
  <span id="span_img_container" class="navIcon" style="width: 50px; border-right-style: solid 1px #939393;"><img id="menu_img" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcToFURgZ4pNY28Zsq8ytnVFL7hzYMpGpBSpQWwGqSP6N77YRUXn"></span>
  <div id="menu_items" class="">
    <a href="#Link1">Link1</a>
    <br>
    <a href="#Link2">Link2</a>
    <br>
    <a href="#Link3">Link3</a> 
    <br>
  </div>
  <span style="color: #ffffff; font-size: 22px; padding-left:20px; padding-top: 21px;">Moneyball Tool</span>>
</div>

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

Nativescript apps are unable to utilize Node modules

I am currently facing an issue with integrating multiple plugins into my Nativescript application. The computed path to locate these installed plugins appears to be incorrect, and I am unable to locate any guidance on how to rectify this issue. Is there a ...

javascriptnpmpluginsnativescripttns

Error: Unspecified object found in Three.js file

I am facing an issue where I have declared a global variable to store an OBJ loaded through THREE.OBJLoader, but when trying to animate the position or rotation of the object, I receive an error stating that the variable is undefined. Below is how I have ...

javascriptthree.js

Nesting Angular Controllers with the Same Controller

Do you think it's a good idea to nest one controller within another in Angular? Here's an example scenario: In my HTML file, the body tag is assigned a controller named "CommonCtrl". Inside this body tag, I'm using includes to load a templ ...

angularjs

Obtaining the clicked element within a functional component in React

I'm having trouble in React because I am unable to select the clicked element. The use of "this" in a functional component is not functioning as expected. function Test(data) { function getElement() { } return ( <div> ...

javascriptreactjs

Issue with setting the variable for md-selected in md-tabs when invoking a function within ui-router

My ui-router template features md-tabs, with some tabs being static and others dynamically created using ng-repeat to iterate through a specified data model array. Within these dynamically created tabs, there are three buttons serving the following purpos ...

angularjstabsangularjs-scopeangular-ui-routerangular-material

Removing data entry from MySQL database table using PDO

I'm facing an issue with deleting a row from my database. Despite trying various methods like PDO and MySQL, the data is not getting deleted, but it shows as if it has been deleted. Can someone please help me identify what might be wrong with my code? ...

phphtmlmysqlpdo

Validation in Angular2 is activated once a user completes typing

My goal is to validate an email address with the server to check if it is already registered, but I only want this validation to occur on blur and not on every value change. I have the ability to add multiple controls to my form, and here is how I have st ...

javascriptangulartypescript

AngularJS - Finding the position of an element with the query "is located at the bottom of the page"

How can we effectively determine if there is more content to be scrolled in Angular, especially when dealing with a single-page app with a fixed bottom navbar? I am looking for a way to visually signal to users that there is additional content available b ...

javascriptcsstwitter-bootstrapangularjs

I am curious about the significance of the * (star/asterisk) syntax that comes after a yield in a recursive generator function

Imagine I have coded an ES6 generator function *createFibonacciIterator(a = 0, b = 1) { yield b; yield *generateNextFibonacci(b, b + a); // <== INQUIRING ABOUT THIS LINE } Now, I utilize this generator to obtain the initial 20 results let fibber ...

javascriptiteratorecmascript-6generatoryield

Content within iframe is failing to load correctly on both Firefox and Internet Explorer browsers

On my website, I have 4 iframes embedded in 4 different tabs. I've noticed that the content is being cropped when viewed on Firefox, but it loads properly when using Chrome. Strangely, if I manually reload the iframe, the content displays correctly. T ...

javascripthtmlcss

Styling Iframe Borders with HTML and CSS: A Guide to Custom

Hello there, I am still learning the ropes of HTML and CSS and I have a question regarding styling a div with CSS to look like a default iframe in Internet Explorer. Despite my efforts and searches on Google, I haven't been able to achieve the desired ...

htmlcssiframeborder-layout

Using Webpack to Compile Sass (and keep class names local)

It's been a long journey trying to configure my Webpack setup to compile Sass, and the process has become quite overwhelming. In my quest for answers, I encountered numerous Github issues, Stackoverflow threads, and blog posts discussing how to integr ...

javascriptcssreactjswebpack

What causes items within an Array() to be interdependent? (Javascript)

Here is what I attempted: let array = Array(2).fill([]); array[0].push(1); Expected result: array = [[1], []] Actual result: array = [[1], [1]] Can someone explain why the second element is affected by the first in this scenario? Appreciate any help in ...

javascripttypescriptweb

Certain browsers are causing issues with the jQuery data-action="save" button not getting posted as expected

My form successfully captures a signature and sends it to an MVC4 controller action when using Internet Explorer, but it doesn't work on Chrome or some mobile devices. Can anyone help me figure out why the form isn't submitting in certain situati ...

jqueryhtml

Is there a way to incorporate multiple rules from data into a text component using Vuetify?

I'm looking to establish specific rules within a mixin for my components. Allow me to provide a straightforward example of my request: Example Link The code snippet: <v-text-field :rules="[nbRules, requiredRules]" outlined v-model="name" label ...

javascriptvue.jsvuetify.js

Invalid npm setup

After reinstalling npm and attempting to run the command npm start, I encountered the following error message. Unfortunately, my solutions have run out. Can anyone offer assistance? I tried installing version 2.3.4, but it was unsuccessful. @angular/< ...

angularjsnode.jstypescriptnpmnpm-install

The complexity surrounding various versions of jQuery, the .noConflict method, and the jQuery migrate feature

I was tasked with making a large-scale website responsive, and decided to utilize Bootstrap as the framework. However, I encountered issues due to the jQuery version (v1.8.2) being used. In my development environment, I resolved this by including the follo ...

javascriptjqueryjquery-migrate

Encountering a NodeJS crash when executing MySQL queries

Exploring NodeJS for the first time and experimenting with MySQL. Successfully retrieving content from the database to display on my page (/test01). Encountering a crash when attempting to fetch values from the database in order to store them in a cookie ...

javascriptmysqlnode.js

Executing JavaScript on the server-side with Blazor

Greetings! Currently, I am attempting to convert the bytes of my video from C# to JavaScript in order to transform them into URL.createObjectURL on a Blazor server-side application. I managed to move the bytes using Js Invoke. .cs if (!string.IsNull ...

javascriptc#asp.netblazorblazor-server-side

Invoke an anchor element using JavaScript

I have successfully implemented Thickbox 3.1 to display a popup by using the following code: <a href="filename.php" class="thickbox"> TEST </a> When clicking on the "TEST" link, the popup works perfectly. However, my current issue is that I ...

javascriptjquery