Enhance your website with a stylish CSS jQuery menu that lets you toggle, slide

Question

Enhance your website with a stylish CSS jQuery menu that lets you toggle, slide

If you're curious about the code, take a look here!

Here are some of the issues I'm facing:

The div doesn't toggle to hide when clicked on itself, only when another one is clicked. (UPDATE: it actually won't toggle at all)
When the page loads, all the divs that are supposed to be hidden briefly appear before disappearing. Is there a way to prevent this? (I've fixed it by using display:none; in css)
Once a div is clicked, it should maintain its highlighted background color until either another div is clicked or itself is clicked again. I can't seem to figure out how to do this.
(on a side note) On the iPad, the menu_row retains its hover background color even after being clicked. It's fine if the color stays while the div is visible, but once it retracts, it should revert back to gray. Any suggestions on how to achieve this?

jquery html css ipad

Answer 1

Answer №1

1.

jQuery(document).ready(function($) {

    //store the `.menuImage` elements as they will be frequently used
    var $menuImages = $(".menuImage").hide('slow');
    $(".menuItem").click(function() {

        //identify the `.menuImage` element that is a child of the clicked element
        var $ele = $(this).children(".menuImage");

        //collapse all other `.menuImage` elements except for the one inside the clicked element
        $menuImages.not($ele).slideUp(500);

        //toggle the visibility of the child element within the clicked element
        $ele.slideToggle(500);
    });
});

Demo: http://jsfiddle.net/jasper/XcJwW/17/

3.

jQuery(document).ready(function($) {
    var $menuImages = $(".menuImage").hide('slow');
    $(".menuItem").click(function() {
        var $ele = $(this).children(".menuImage");

        //slide out and remove `hover` class from all other `.menuImage` elements
        $menuImages.not($ele).slideUp(500).parent().removeClass('hover');

        //toggle view of clicked `.menuImage` element and toggle the `hover` class
        $ele.slideToggle(500).parent().toggleClass('hover');
    });
});

In your CSS, make this small adjustment:

#menu_row1 .menuItem:hover, #menu_row1 .menuItem.hover { background:#ff0000; }
#menu_row2 .menuItem:hover, #menu_row2 .menuItem.hover { background:#ffe100; }
#menu_row3 .menuItem:hover, #menu_row3 .menuItem.hover { background:#0033cc; }

Remember, you can either hover over an element or assign it the `hover` class to achieve the same effect.

Demo: http://jsfiddle.net/jasper/XcJwW/20/

Answer 2

1.

jQuery(document).ready(function($) {

    //store the `.menuImage` elements as they will be frequently used
    var $menuImages = $(".menuImage").hide('slow');
    $(".menuItem").click(function() {

        //identify the `.menuImage` element that is a child of the clicked element
        var $ele = $(this).children(".menuImage");

        //collapse all other `.menuImage` elements except for the one inside the clicked element
        $menuImages.not($ele).slideUp(500);

        //toggle the visibility of the child element within the clicked element
        $ele.slideToggle(500);
    });
});

Demo: http://jsfiddle.net/jasper/XcJwW/17/

3.

jQuery(document).ready(function($) {
    var $menuImages = $(".menuImage").hide('slow');
    $(".menuItem").click(function() {
        var $ele = $(this).children(".menuImage");

        //slide out and remove `hover` class from all other `.menuImage` elements
        $menuImages.not($ele).slideUp(500).parent().removeClass('hover');

        //toggle view of clicked `.menuImage` element and toggle the `hover` class
        $ele.slideToggle(500).parent().toggleClass('hover');
    });
});

In your CSS, make this small adjustment:

#menu_row1 .menuItem:hover, #menu_row1 .menuItem.hover { background:#ff0000; }
#menu_row2 .menuItem:hover, #menu_row2 .menuItem.hover { background:#ffe100; }
#menu_row3 .menuItem:hover, #menu_row3 .menuItem.hover { background:#0033cc; }

Remember, you can either hover over an element or assign it the `hover` class to achieve the same effect.

Demo: http://jsfiddle.net/jasper/XcJwW/20/

Answer 3

Answer №2

Here is an alternative script for you to use:

$(document).ready(function() {
    $(".menuIcon").hide();
    $(".menuItemButton").click(function() {
        $(".menuItemButton").not(this).children(".menuIcon").hide('fast');
        $(this).children(".menuIcon").slideToggle(300);
    });
});

You can remove the unnecessary second part of your existing script.

Answer 4

Here is an alternative script for you to use:

$(document).ready(function() {
    $(".menuIcon").hide();
    $(".menuItemButton").click(function() {
        $(".menuItemButton").not(this).children(".menuIcon").hide('fast');
        $(this).children(".menuIcon").slideToggle(300);
    });
});

You can remove the unnecessary second part of your existing script.

Answer 5

Answer №3

One reason for this behavior is that you hide it before using slidetoggle, causing the toggle to show. To fix this, hide all elements except the one directly below your current node (consider using filter() or not()). For example:
```
var self = $(this);
// Filter out elements that are descendants of this
$('menuItem').filter(function () { return ! self.has(this); }).hide();
```
The issue arises from applying .hide('slow') within the .ready function. Removing 'slow' should resolve the problem.
In addition to defining the style for :hover, you also need to define it for a class that is added/removed on click. This will help maintain those styles.
I'm not entirely sure. iPads don't have hover functionality, so it's possible they use :active instead. Providing explicit styling for :active could override the :hover styling in this case.

Answer 6

One reason for this behavior is that you hide it before using slidetoggle, causing the toggle to show. To fix this, hide all elements except the one directly below your current node (consider using filter() or not()). For example:
```
var self = $(this);
// Filter out elements that are descendants of this
$('menuItem').filter(function () { return ! self.has(this); }).hide();
```
The issue arises from applying .hide('slow') within the .ready function. Removing 'slow' should resolve the problem.
In addition to defining the style for :hover, you also need to define it for a class that is added/removed on click. This will help maintain those styles.
I'm not entirely sure. iPads don't have hover functionality, so it's possible they use :active instead. Providing explicit styling for :active could override the :hover styling in this case.

Enhance your website with a stylish CSS jQuery menu that lets you toggle, slide

Answer №1

Answer №2

Answer №3

Similar questions

Extracting the URL of the @font-face declaration in CSS with the use of JavaScript

Issue with Ajax response being undefined when keyup event is triggered

Discovering the differences between input values in HTML when using scripts

Creating dynamic form fields using AngularJS

Is async programming synonymous with multi-threading?

Calculating available balance by subtracting the entered amount from the existing balance in Python Django

Selecting elements in VueJS and jQuery using query selectors

Implement a shadow effect on a customized image using Tailwind CSS

When using Angular 8 with RxJs, triggering API calls on click events will automatically detach if the API server is offline

Having trouble with some JS and Jquery codes not functioning properly in IE until the page is refreshed a few times. Any suggestions on how to fix this issue?

Determine the total width by adding together the widths of all child elements

Displaying Selected DropdownList Value from Database into TextBox in MVC3

Arranging data into columns using HTML and CSS

php modes breaking away from traditional php

Tips for creating a responsive carousel slider for images

Ensure that the div automatically scrolls to the bottom when it is loaded, and also when new data is added - using angular

Sending checkbox selections to PHP using AJAX and jQuery

Determining if a replacement took place in the Javascript replace function

Transitioning in Vue.js can be triggered by changing a value up or down

Using JavaScript to dynamically load Cascading Style Sheets based on the current