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

The banner may be cropped when viewing on lower resolutions such as mobile devices or when zoomed in

What is the best way to confirm checkbox selection based on MySQL data?

prismjs plugin for highlighting code displays code in a horizontal format

Revolutionary AJAX technology seamlessly updates and refreshes elements within every row or form on a webpage

Developing a one-of-a-kind jQuery plugin with customized CSS styling

Ways to extract particular items from a JSON array and store them in a JavaScript array

What is the best way to achieve a seamless CSS transition for my sticky navigation bar?

Ensure the content spans the full width of the container without displaying an overflow scrollbar by using the "position: absolute

Struggling with implementing Mobile Navigation menu

Adjust the color of error messages in shiny from red

The date in the JSON response does not align correctly

Developing engaging div content using jQuery

What is the best way to display multiple "loading images" for each cell of a table's data as it is being fetched asynchronously from a PHP script?

Having trouble adding your own styling to bootstrap-4 using a custom CSS file?

Transform geojson data into an HTML table

Provide a spider with unadulterated HTML rather than setting off AJAX requests

Resolving the Material-UI NextJS Button Styling Dilemma

Scroll horizontally through the number field in Chrome

Tips for reducing text in a card design

Tips on how to prevent certain classes from being impacted by a hue-rotate filter applied to all elements on a webpage