Having trouble with menu alignment when implementing jQuery for extra features

Question

Having trouble with menu alignment when implementing jQuery for extra features

I am in need of creating a mega menu similar to the one depicted in the image below.

So far, I have managed to make it work to some extent as shown in this jsFiddle link.

However, I am encountering some design and functionality issues with my current implementation.

For instance, when attempting to hide the default text for each dropdown menu using

//$(this).find(".nav-info").hide();

, Menu 4 & 5 do not appear correctly on the right side.

I aim to replicate a menu layout similar to the one featured on this website. However, I do not require the default text displayed for the parent menus.

Although I made modifications to the script for showing the first list item of the submenu, it works well for Parent menu ONE and TWO but causes alignment issues for MENU FOUR and FIVE.

I would greatly appreciate assistance in resolving this issue...

CODE

<div class="container_16">
    <div class="nav-main grid_16">
        <div class="wrap-nav-media">
            <ul id="nav-top-media">
                <!-- ONE -->
                <li class="nav-item-1"><a href="../company-overview">Parent Menu One</a>

                    ...

<p>UPDATE:</p>

<p>After attempting to hide the following HTML code block it breaks the alignment of MENU FOUR & FIVE when using <code>$(this).find(".nav-info").hide();

<div style="display: block;" class="menu-page nav-info">    <a class="thumb" rel="nofollow" title="" href="">
                                        <div style="height:80px width:80px; background-color:yellow;float:right;">IMAGE</div>
                                    </a>

    <div>
        <p>This is Default text when i try to hide this then this menu moves to left</p>
    </div>
</div>

javascript jquery html css

Answer 1

Answer №1

After reviewing the website you mentioned as an example, I have come up with a solution using plain CSS and a few lines of jQuery to achieve the same functionality. Here is my approach:

HTML

<nav class="nav-wrapper">
    <ul class="nav">
        <li><a href="#">Menu One</a>
            <div  class="dropdown">
                <ul>
                    <li><a href="#">Sub menu one</a>
                        <div class="dd-panel">
                            <img class="media" src="http://lorempixel.com/200/160/animals/" alt="image" />
                            <p class="media-caption"><strong>Menu one - sub menu one</strong>Aliquam erat volutpat. Quisque porta varius tortor, ac luctus lorem condimentum vel. Mauris venenatis justo id fringilla tincidunt.</p>
                        </div>
                    </li>
                    ... (additional HTML code)
                </ul>
            </div>
        </li> 
        ... (more list items)
    </ul>
</nav>

CSS

body {
    font:normal 14px Arial, Sans-serif;
}

a {
    text-decoration:none;
}
ul {
    margin:0;
    padding:0;
}
... (CSS styling)

jQuery

$(document).ready(function(){
    $(".nav").on("mouseenter", " > li", function(){

        /*if dropdown is likely to go out of parent nav then right align it :) */
        if (($(this).offset().left) + 600 > $('.nav').width()) {
            $(this).find(".dropdown").addClass("dropdown-last");
        }
    });
    ... (jQuery functionality)
});

View the live example on JSFIDDLE: http://jsfiddle.net/shekhardesigner/wPWDm/

Answer 2

After reviewing the website you mentioned as an example, I have come up with a solution using plain CSS and a few lines of jQuery to achieve the same functionality. Here is my approach:

HTML

<nav class="nav-wrapper">
    <ul class="nav">
        <li><a href="#">Menu One</a>
            <div  class="dropdown">
                <ul>
                    <li><a href="#">Sub menu one</a>
                        <div class="dd-panel">
                            <img class="media" src="http://lorempixel.com/200/160/animals/" alt="image" />
                            <p class="media-caption"><strong>Menu one - sub menu one</strong>Aliquam erat volutpat. Quisque porta varius tortor, ac luctus lorem condimentum vel. Mauris venenatis justo id fringilla tincidunt.</p>
                        </div>
                    </li>
                    ... (additional HTML code)
                </ul>
            </div>
        </li> 
        ... (more list items)
    </ul>
</nav>

CSS

body {
    font:normal 14px Arial, Sans-serif;
}

a {
    text-decoration:none;
}
ul {
    margin:0;
    padding:0;
}
... (CSS styling)

jQuery

$(document).ready(function(){
    $(".nav").on("mouseenter", " > li", function(){

        /*if dropdown is likely to go out of parent nav then right align it :) */
        if (($(this).offset().left) + 600 > $('.nav').width()) {
            $(this).find(".dropdown").addClass("dropdown-last");
        }
    });
    ... (jQuery functionality)
});

View the live example on JSFIDDLE: http://jsfiddle.net/shekhardesigner/wPWDm/

Answer 3

Answer №2

Hey @KnowledgeSeeker, your code looks great! Here's a suggestion to simplify it even further: instead of using show and hide, you can just have one global variable for each menu tab like this:

    var html_4=""; 
    and 
    var html_5="";

You can store the inner HTML code for each tab in these variables separately. Then, when switching tabs, you can use this code: (For tab four)

    $(this).find(".nav-info").html("");
    $(this).find(".nav-info").html(html_4);

Do the same for tab five by changing the variable name. Make sure to keep the class always because removing it may cause CSS issues to arise.

Answer 4

Hey @KnowledgeSeeker, your code looks great! Here's a suggestion to simplify it even further: instead of using show and hide, you can just have one global variable for each menu tab like this:

    var html_4=""; 
    and 
    var html_5="";

You can store the inner HTML code for each tab in these variables separately. Then, when switching tabs, you can use this code: (For tab four)

    $(this).find(".nav-info").html("");
    $(this).find(".nav-info").html(html_4);

Do the same for tab five by changing the variable name. Make sure to keep the class always because removing it may cause CSS issues to arise.

Answer 5

Answer №3

I recently implemented this using only CSS. It involves specific widths and heights, as well as absolute positioning for the details. This means that the popup boxes will not automatically adjust to fit their content.

Each detail needs a background because I always show the first item to simulate it being displayed already. When hovering over other items, they appear on top of the first one. Without a background, you would see the details of the first item behind them.

Here's the HTML code:

<ul class="dropdown-mega">
    <li class="dd-mega-item">
        <a href="#">Menu 1</a>
        <ul class="dd-mega-sub">
            <li class="dd-mega-sub-item">
                <a href="#">Submenu 1</a>
                <div class="dd-mega-sub-item-details">
                    <img src="http://placekitten.com/100/100">
                    <p>Details for Submenu 1</p>
                </div>
            </li>

            <!-- More li elements here -->

        </ul>
    </li>

    <!-- More li elements here -->

</ul>

And here's the corresponding CSS:

.dropdown-mega, .dropdown-mega ul {
    margin: 0;
    padding: 0;
}

/* More CSS styles for dropdown menu */

You can view a demo of this implementation on JSFiddle.

Answer 6

I recently implemented this using only CSS. It involves specific widths and heights, as well as absolute positioning for the details. This means that the popup boxes will not automatically adjust to fit their content.

Each detail needs a background because I always show the first item to simulate it being displayed already. When hovering over other items, they appear on top of the first one. Without a background, you would see the details of the first item behind them.

Here's the HTML code:

<ul class="dropdown-mega">
    <li class="dd-mega-item">
        <a href="#">Menu 1</a>
        <ul class="dd-mega-sub">
            <li class="dd-mega-sub-item">
                <a href="#">Submenu 1</a>
                <div class="dd-mega-sub-item-details">
                    <img src="http://placekitten.com/100/100">
                    <p>Details for Submenu 1</p>
                </div>
            </li>

            <!-- More li elements here -->

        </ul>
    </li>

    <!-- More li elements here -->

</ul>

And here's the corresponding CSS:

.dropdown-mega, .dropdown-mega ul {
    margin: 0;
    padding: 0;
}

/* More CSS styles for dropdown menu */

You can view a demo of this implementation on JSFiddle.

Answer 7

Answer №4

If you're looking for resources on creating mega menus, consider checking out Green Gecko Design's article at . Additionally, Nettus+ has a helpful guide on the topic:

Answer 8

If you're looking for resources on creating mega menus, consider checking out Green Gecko Design's article at . Additionally, Nettus+ has a helpful guide on the topic:

Having trouble with menu alignment when implementing jQuery for extra features

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Convert HTML to PDF using AJAX for seamless downloading

Exploring the Excitement of PHP Regular Expressions (preg_replace)

Add a fresh component when a key is pressed - reactjs

Sending non-textual data within a JQuery ajax POST request

When the play button is clicked, the video slides over to the left

Exploring Raycasting with Three.js and WhitestormJS

asynchronous ajax resolution

Unable to submit CSV file for Controller Action

Display an array comprising of other arrays

Serializing data in JavaScript and inserting it into a database

Converting rotation into a directional vector

Unfortunately, CSS3 PIE is not compatible with border-radius and box-shadow properties

Tips for selecting a dynamic element with a variable in Javascript, jQuery, and DOM

Steps to transfer text from one input field to another by clicking a button using JavaScript

Utilizing Ajax to dynamically populate table columns

What is the best way to access the data from a CSV file that has been uploaded using ngFile

The unexpected behavior of string.matchAll(regex) in web browsers

The drop-down menu vanishes mysteriously before it can be selected

Redirecting to the personalized 404 error page

Creating a dynamic select functionality in Drupal forms