Get these click functionalities functioning without relying on jQuery

Question

Get these click functionalities functioning without relying on jQuery

I have designed a vertical menu with multiple sub menus. Each menu contains at least 3 sub menus, and the sub menus are set to open only when their parent menu is clicked. (I require jQuery support for this menu) However, since I do not use jQuery on any other pages, I decided not to link jQuery for this particular menu. Without jQuery, the menu appears like this: withoutjQuery

**If a coder can make this menu work without jQuery, you are welcome to do so. Alternatively, suggestions on how to achieve this using just CSS are also appreciated.

Here is the jsfiddle that utilizes jQuery. Can someone modify it to work without jQuery?

Function

  $(function () {
      $('li ul').hide();
      $("#leftmenuidfrmslt li").click(function(e) {
          var submenu = $(this).children("ul");
          if (!$(submenu).is(":visible")) {
              $('li ul').slideUp("fast");
              submenu.slideDown("fast");
          } else {
              submenu.slideUp("fast");
          }
      });
  });

html css fonts

Answer 1

Answer №1

My suggestion involves implementing a solution without the use of jQuery. By adding specific classes to your CSS and applying them to the appropriate UL-tags in your HTML code, you can achieve the desired functionality. Check out this jsfiddle sample that demonstrates how to accomplish this using pure JavaScript (no jQuery).

function getXmlHttp(){
    try {
        return new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
        try {
            return new ActiveXObject("Microsoft.XMLHTTP");
        } catch (ee) {
        }
    }
    if (typeof XMLHttpRequest!='undefined') {
        return new XMLHttpRequest();
    }
}
function hide(node){
    node.style.display='none';
}
function func(e){
    e.preventDefault();
    var q = getXmlHttp();
    var url = this.getAttribute('href');
    q.open('GET', url , false);
    q.send(null);
    var result = 'File '+url+' not found.';
    if(q.status == 200) {
        result = q.responseText;
    }
    document.querySelector('.page').innerHTML = result;
    document.querySelector('#leftmenu').style.width = '70px';
    var items = document.querySelectorAll('li ul, #leftmenu b');
    for (var i=0; i<items.length; i++) {
        hide(items[i]);
    }
    this.removeEventListener('click',func(),false);
}

function slideUp(node){
    node.setAttribute('class', "submenu hidden");
}

function slideDown(node){
    node.setAttribute('class', "submenu visible");
}

function switchSubMenu(){
var ch = this.children;
    for(var i=0; i<ch.length; i++) {
        if (ch[i].nodeName == 'UL') {
            var v = document.getElementsByClassName("visible");
            if (v) {
                for(var j=0; j<v.length; j++){
                    if(v[j] != ch[i]) {
                        slideUp(v[j]);
                    }
                }
            }
          ch[i].getAttribute('class') == "submenu hidden" ? slideDown(ch[i]) : slideUp(ch[i]);
        }
    }
}

var sm = document.querySelectorAll('.submenu');
for(var i=0; i<sm.length; i++) {
    slideUp(sm[i]);
    sm[i].parentNode.addEventListener("click",switchSubMenu, false);
}
var links = document.querySelectorAll('.reveal');
for(var j=0; j<links.length; j++) {
    links[j].addEventListener("click",func, false);
}

Answer 2

My suggestion involves implementing a solution without the use of jQuery. By adding specific classes to your CSS and applying them to the appropriate UL-tags in your HTML code, you can achieve the desired functionality. Check out this jsfiddle sample that demonstrates how to accomplish this using pure JavaScript (no jQuery).

function getXmlHttp(){
    try {
        return new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
        try {
            return new ActiveXObject("Microsoft.XMLHTTP");
        } catch (ee) {
        }
    }
    if (typeof XMLHttpRequest!='undefined') {
        return new XMLHttpRequest();
    }
}
function hide(node){
    node.style.display='none';
}
function func(e){
    e.preventDefault();
    var q = getXmlHttp();
    var url = this.getAttribute('href');
    q.open('GET', url , false);
    q.send(null);
    var result = 'File '+url+' not found.';
    if(q.status == 200) {
        result = q.responseText;
    }
    document.querySelector('.page').innerHTML = result;
    document.querySelector('#leftmenu').style.width = '70px';
    var items = document.querySelectorAll('li ul, #leftmenu b');
    for (var i=0; i<items.length; i++) {
        hide(items[i]);
    }
    this.removeEventListener('click',func(),false);
}

function slideUp(node){
    node.setAttribute('class', "submenu hidden");
}

function slideDown(node){
    node.setAttribute('class', "submenu visible");
}

function switchSubMenu(){
var ch = this.children;
    for(var i=0; i<ch.length; i++) {
        if (ch[i].nodeName == 'UL') {
            var v = document.getElementsByClassName("visible");
            if (v) {
                for(var j=0; j<v.length; j++){
                    if(v[j] != ch[i]) {
                        slideUp(v[j]);
                    }
                }
            }
          ch[i].getAttribute('class') == "submenu hidden" ? slideDown(ch[i]) : slideUp(ch[i]);
        }
    }
}

var sm = document.querySelectorAll('.submenu');
for(var i=0; i<sm.length; i++) {
    slideUp(sm[i]);
    sm[i].parentNode.addEventListener("click",switchSubMenu, false);
}
var links = document.querySelectorAll('.reveal');
for(var j=0; j<links.length; j++) {
    links[j].addEventListener("click",func, false);
}

Answer 3

Answer №2

By utilizing attribute selectors, you have the ability to establish a default font-size of 20px and then customize it for specific elements:

[class*="flaticon-"] {
    font-size: 20px;    
}

h4[class*="flaticon-"] {
    font-size: 40px;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

Answer 4

By utilizing attribute selectors, you have the ability to establish a default font-size of 20px and then customize it for specific elements:

[class*="flaticon-"] {
    font-size: 20px;    
}

h4[class*="flaticon-"] {
    font-size: 40px;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

Answer 5

Answer №3

Include the font size settings as shown below

.small-icon { 
    font-family:"Flaticon";
    font-size: 20px;
    line-height: 1;
}
.small-icon:before {
    font-size: 20px;        
    margin-left: 0;
}
.big-icon { 
    font-family:"Flaticon";
    font-size: 40px;
    line-height: 1;
}
.big-icon:before {
    font-size: 40px;        
    margin-left: 0;
}

When adding it to your HTML file

<div class="center boxborder">
    <ul class="social">
        <li><a href="#"><span class="small-icon flaticon-facebook12" style="color: #3399ff;"></span></a>

        </li>
        <li> <a href="#"><span class="small-icon flaticon-social19" style="color:#33ccff;"></span></a>

        </li>
        <li> <a href="#"><span class="small-icon flaticon-google109" style="color: #ff3300;"></span></a>

        </li>
        <li><a href="#"><span class="small-icon flaticon-linkedin11" style="color: #21a6d8;"></span></a>

        </li>

    </ul>
</div>

Answer 6

Include the font size settings as shown below

.small-icon { 
    font-family:"Flaticon";
    font-size: 20px;
    line-height: 1;
}
.small-icon:before {
    font-size: 20px;        
    margin-left: 0;
}
.big-icon { 
    font-family:"Flaticon";
    font-size: 40px;
    line-height: 1;
}
.big-icon:before {
    font-size: 40px;        
    margin-left: 0;
}

When adding it to your HTML file

<div class="center boxborder">
    <ul class="social">
        <li><a href="#"><span class="small-icon flaticon-facebook12" style="color: #3399ff;"></span></a>

        </li>
        <li> <a href="#"><span class="small-icon flaticon-social19" style="color:#33ccff;"></span></a>

        </li>
        <li> <a href="#"><span class="small-icon flaticon-google109" style="color: #ff3300;"></span></a>

        </li>
        <li><a href="#"><span class="small-icon flaticon-linkedin11" style="color: #21a6d8;"></span></a>

        </li>

    </ul>
</div>

Answer 7

Answer №4

While CSS technically allows you to achieve this, utilizing jQuery or vanilla JS is recommended for a more robust solution.

By using JavaScript, you can ensure a proper separation of concerns between content (HTML), styling (CSS), and functionality (JS).

However, if you prefer to explore CSS options, you can come close with the following code snippet:

Check out the Demo on Fiddle

HTML

<div class='menuGroup'>
    <label id='item1'>
        <input type='radio' for='item1' name='menu1' />Item 1
        <div class='menuGroup'>
            <label id='subitem1'>
                <input type='radio' for='subitem1' name='submenu1' />Subitem 1
                <div class='menuGroup'>more menu levels...</div>
            </label>
            <label id='subitem2'>
                <input type='radio' for='subitem2' name='submenu1' />Subitem 2
                <div class='menuGroup'>more menu levels...</div>
            </label>
        </div>
    </label>
    <label id='item2'>
        <input type='radio' for='item2' name='menu1' />Item 2
        <div class='menuGroup'>
            <label id='subitem3'>
                <input type='radio' for='subitem4' name='submenu2' />Subitem 3
                <div class='menuGroup'>more menu levels...</div>
            </label>
            <label id='subitem4'>
                <input type='radio' for='subitem5' name='submenu2' />Subitem 4
                <div class='menuGroup'>more menu levels...</div>
            </label>
        </div>
    </label>
</div>

CSS

label {
    display:block;
    position:relative;
}
label:not(:last-child) {
    border-bottom:1px solid grey;
}
input {
    display:none;
}
input:checked+.menuGroup {
    display:block;
    width:200px;
    left:100%;
    top:-1px;
}
label .menuGroup {
    display:none;
}
.menuGroup {
    position:absolute;
    border:1px solid grey;
}

Answer 8

While CSS technically allows you to achieve this, utilizing jQuery or vanilla JS is recommended for a more robust solution.

By using JavaScript, you can ensure a proper separation of concerns between content (HTML), styling (CSS), and functionality (JS).

However, if you prefer to explore CSS options, you can come close with the following code snippet:

Check out the Demo on Fiddle

HTML

<div class='menuGroup'>
    <label id='item1'>
        <input type='radio' for='item1' name='menu1' />Item 1
        <div class='menuGroup'>
            <label id='subitem1'>
                <input type='radio' for='subitem1' name='submenu1' />Subitem 1
                <div class='menuGroup'>more menu levels...</div>
            </label>
            <label id='subitem2'>
                <input type='radio' for='subitem2' name='submenu1' />Subitem 2
                <div class='menuGroup'>more menu levels...</div>
            </label>
        </div>
    </label>
    <label id='item2'>
        <input type='radio' for='item2' name='menu1' />Item 2
        <div class='menuGroup'>
            <label id='subitem3'>
                <input type='radio' for='subitem4' name='submenu2' />Subitem 3
                <div class='menuGroup'>more menu levels...</div>
            </label>
            <label id='subitem4'>
                <input type='radio' for='subitem5' name='submenu2' />Subitem 4
                <div class='menuGroup'>more menu levels...</div>
            </label>
        </div>
    </label>
</div>

CSS

label {
    display:block;
    position:relative;
}
label:not(:last-child) {
    border-bottom:1px solid grey;
}
input {
    display:none;
}
input:checked+.menuGroup {
    display:block;
    width:200px;
    left:100%;
    top:-1px;
}
label .menuGroup {
    display:none;
}
.menuGroup {
    position:absolute;
    border:1px solid grey;
}

Get these click functionalities functioning without relying on jQuery

Function

Answer №1

Answer №2

Answer №3

Answer №4

Check out the Demo on Fiddle

Similar questions

Locating all elements on a webpage that are either above or below a specific element, capturing those that intersect visually

I created a design for a subscription form that appears aesthetically pleasing in Firefox, however, it does not maintain the same appearance in Opera. Any suggestions on how I can resolve this issue?

Changing the color of a div while implementing a show and hide effect in JavaScript

Sending a concealed input according to the chosen option

Is the code generated by Webflow.com functional and practical?

Expanding the width of a list-group with Bootstrap to fill the entire div

Displaying an Array in HTML using Angular

Access a particular html tag as a value within an object

Is there a gsub feature available in awk for applying color to characters on unix systems

Retrieve data from computed attributes

How come the Bootstrap 4 column is not utilizing its entire available width?

A critical bug has been discovered in Safari and Chrome where HTML5 canvas fails to work in a specific scenario, while Firefox performs perfectly

The table header does not stay in place or remain fixed

Conditional rendering of a component in ReactJS while maintaining the "empty" space

Switching FontAwesome Stacks on Hover

Setting custom domains on Heroku is essential for optimizing the performance and branding of my website

Ways to display content alongside an image

Stop input-group-append from causing adjacent input-groups to shift right

Adjusting Window Size Causes White Space to Appear Above Div

Incorporate the content of an HTML file into a Django template by substituting a portion