Expandable Hover Navigation Bar with jQuery for Full Page Width Dimension

I currently have a vertical menu on my website and I am looking to implement a dropdown system for some of the links. I came across an example on the internet that inspired me: http://jsfiddle.net/4jxph/3018/ However, I specifically want a full-width submenu similar to the dropdown system used by Sony: Sony. I have attempted to create a full-width dropdown menu myself using this code: http://www.jsfiddle.net/3aK9k/4.

Essentially, what I desire is for the submenu to appear seamlessly when hovering over the content without any abrupt movements. While I believe this is achievable, my current understanding of JS and jQuery is limited.

If anyone can provide guidance on how to achieve this effect, I would greatly appreciate it.

javascriptjqueryhtmlcssdrop-down-menu

Answer №1

HTML

<ul id="nav_menu">
    <li><a class="nav_menu_link nav">Home</a></li>
    <li class="nav_menu_link_drop nav">
        <a class="nav_menu_link">DropDown 1</a>
    </li>
        <div id="content1" class="content" style="display: none;">
            <ul style="padding: 20px; height: auto;">
                <li><a href="#">Item1</a></li><br />
                      <li><a href="#">Item2</a></li><br />
                      <li><a href="#">Item3</a></li><br />
                      <li><a href="#">Item4</a></li>
            </ul>
    </div>
    <li class="nav_menu_link_drop nav">
        <a class="nav_menu_link">DropDown 2 <i class="arrow down"></i></a></li>
    <div id="content2" class="content" style="display: none;">
        <ul style="padding: 20px; height: auto;">
            <li><a href="#">Other</a></li><br />
                      <li><a href="#">Other Test</a></li>
        </ul>
    </div>
</ul>

jQuery

var stop = true;
var hovered;
var timeout;

$('.nav').hover(
    function(){
        clearTimeout(timeout);
        stop = true;
        hovered = this;
        timeout = setTimeout(function(){
        if($(hovered).hasClass('nav_menu_link_drop')){
            $('.content').css('z-index',0);
            $(hovered).next('.content').css('z-index',5);        
            $(hovered).next('.content').slideDown(350);
            timeout = setTimeout(function(){
                $('.content').not($(hovered).next('.content')).slideUp(350);  
            },200);
        }
        else
            $('.content').slideUp(350);    
        },400);
    },
    function(e){
        stop = false;
        clearTimeout(timeout);
        setTimeout(function(){
            if(!stop)
                $('.content').slideUp(350);
        },500);
    }
);

$('.content').hover(
    function(){
        stop = true;    
    },
    function(){    
    }
);

$('#nav_menu').hover(
    function(){
    },
    function(){
        timeout = setTimeout(function(){
            $('.content').slideUp(350);
        },200);
    }
);

FIDDLE

Answer №2

I have implemented a slidedown feature in the Fiddle that mimics the behavior of sony.de:

Check out the Updated Fiddle (New)

HTML Code:

<div id="menu">
<ul>
    <div id="mainMenu">
    <li class="menu1">Home</li>
    <li class="menu2">DropDown1</li>
    <li class="menu3">DropDown2</li>
    </div>
</ul>
    <div class="submenu menu2">
        <!--menu items-->
    </div>
    <div class="submenu menu3">
        <!--menu items-->
    </div>
</div>

CSS Style:

html,body{
    width:100%;
    height:100%;
    margin:0px;
    padding:0px;
}
#menu{
    position:relative;
    width:100%;
    height:80px;
    font-family:sans-serif;
}
#menu,#menu ul,#menu>ul>#mainMenu>li,#menu div{
    display:inline-block;
    margin-top:0px;
}
/* Additional CSS code goes here */

jQuery Script:

// jQuery script for adding slide down effect
var preClass="";
// Further jQuery implementation details can be found in the provided link.

View the Fiddle with added delay similar to sony.de

Answer №3

Review the specified code snippet on jSFiddle

Get the code file from Box

HTML Code

<ul id="nav_menu">
    <li><a class="nav_menu_link">Home</a></li>
    <li class="nav_menu_link_drop_1">
        <a class="nav_menu_link">DropDown 1</a>
    </li>
        <div id="content1" style="display: none;">  
            <ul id="file_menu">
                <li><a href="#file">File</a></li>
                <li><a href="#edit">Edit</a></li>
                <li><a href="#view">View</a></li>
                <li><a href="#insert">Insert</a></li>
                <li><a href="#modify">Modify</a></li>
                <li><a href="#control">Control</a></li>
                <li><a href="#debug">Debug</a></li>
                <li><a href="#window">Window</a></li>
                <li><a href="#help">Help</a></li>
            </ul>
        </div>
    <li class="nav_menu_link_drop_2">
        <a class="nav_menu_link">DropDown 2 <i class="arrow down"></i></a></li>
    <div id="content2" style="display: none;">
            <ul id="file_menu">
                <li><a href="#file">2 File</a></li>
                <li><a href="#edit">2 Edit</a></li>
                <li><a href="#view">2 View</a></li>
                <li><a href="#insert">2 Insert</a></li>
                <li><a href="#modify">2 Modify</a></li>
                <li><a href="#control">2 Control</a></li>
                <li><a href="#debug">2 Debug</a></li>
                <li><a href="#window">2 Window</a></li>
                <li><a href="#help">2 Help</a></li>
            </ul>
    </div>
</ul>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

CSS Code

* {   
margin: 0;
padding: 0;
}
#nav_menu {
    position: absolute;
    display: block;
    height: 80px;
    width: 100%;
    background: orange;
}
#nav_menu li {
    list-style-type: none;
    text-decoration: none;
    vertical-align: middle;
    height: 80px;
    display: inline-block;
    position: relative;
}
.nav_menu_link {
    color: black;
    font-size: 18px;
    height: 0;
    font-family: Arial;
    vertical-align: baseline;
    position: relative;
    display: inline-block;
    height: auto;
    padding: 29px;
}
.nav_menu_link:hover {
    background: rgba(0, 0, 0, 0.4);
    color: #FFF;
    transition: all .2s;
}
.nav_menu_link:hover .arrow.down {
    border-top-color: #FFF;
}

#content1:hover {
    display: block !important;
    width: 100%;
    height: auto !important;
    position: absolute;
}
#content2:hover {
    display: block !important;
    width: 100%;
    height: auto !important;
    position: absolute;
}
#content1, #content2 {
    width: 100%;
    height: auto;
    background: gray;
    display: none;
    position: absolute;
}

#file_menu {
    border: 1px solid #1c1c1c;
}

#file_menu li {
    width: 100%;
    height: 30px;
    background-color: #302f2f;
}

#file_menu li a {
    font-family: Arial;
    font-size: 14px;
    color:#FFFFFF; 
    font-weight: bold;
    text-decoration:none; 
    padding:5px 10px; 
    display:block;
}

#file_menu li a:hover {
    color: #F00880;
}

JQuery

var link1 = $(".nav_menu_link_drop_1");
var link2 = $(".nav_menu_link_drop_2");
var content1 = $('#content1');
var content2 = $('#content2');

$(link1).hover(
    function(){ 
        $(content1).slideDown(350);
    },
    function(){
        $(content1).slideUp(350);
    }
);

$(link2).hover(
    function(){ 
        $(content2).slideDown(350);
    },
    function(){
        $(content2).slideUp(350);
    }
);

Answer №4

You can accomplish this using pure CSS. It's cleaner and easier to manage.

For a live demonstration, click here: http://jsfiddle.net/4jxph/3031/

Below is the updated CSS code:


body {
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    background-color: #333333;
}

#container {
    margin: auto;
}

#header {
    background-image: url(images/header.png);
    background-repeat: no-repeat;
    height: 42px;
    width: 490px;
    margin-bottom: 20px;
}

#button {
    height: 32px;
    width: 184px;
    margin: auto;
}
#button:hover .file_menu {
    max-height: 100000px; 
    opacity: 1;
}
ul, li {
    margin:0; 
    padding:0; 
    list-style:none;
}

.menu_class {
    border:1px solid #1c1c1c;
}

.file_menu {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    width:100%;
    border: 1px solid #1c1c1c;
    transition: all .2s;
}

.file_menu li {
    background-color: #302f2f;
}

.file_menu li a {
    color:#FFFFFF; 
    text-decoration:none; 
    padding:10px; 
    display:block;
}

.file_menu li a:hover {
    padding:10px;
    font-weight:bold;
    color: #F00880;
}

If you prefer a JavaScript solution (which is more concise than other answers), here it is:


var link = $("li[class^=nav_menu_link_drop]");

$(link).hover(

    function(){ 
        var content = $(this).next('div[id^="content"]');
        $(content).stop(true).slideDown(350);
    },
    function(){
         var content = $(this).next('div[id^="content"]');
         $(content).delay(350).slideUp(350);


    }
);

Does this meet your requirements? Check out the demo here: http://jsfiddle.net/3aK9k/27/

Answer №5

If I understand correctly, you're not interested in the animation. To accomplish that, simply set the animation time to 0. You can skip using .stop() and consider utilizing .hover() instead of mouseenter and mouseleave. Check out this link for more information: http://api.jquery.com/hover/

For example:

$(link1).hover(
    function(){ 
        $(content1).slideDown(0);
    },
    function(){
        $(content1).slideUp(0);
    }
);

Here is the updated code in your fiddle: http://jsfiddle.net/3aK9k/2/

EDIT: Upon further inspection, it seems like you have invalid HTML where the div tag is inside the ul tag. Make sure to move it within the li tag... seriously, double-check your markup as there are other issues too.

EDIT: Maybe it's worth reconsidering your approach. Just because something works doesn't justify using invalid HTML.

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

What is the best way to apply CSS styles to different states in React?

I am endeavoring to adjust the size of an element by utilizing this code snippet. const [size, setSize] = useState({}); The initial size I wish to set is: transform: scale(1, 1) translate3d(0, 0, 0); Upon clicking on the element, my aim is to enlarge it ...

cssreactjsstate

What are the methods for handling JSON type in a web server?

Hey there! I'm currently working on making an AJAX call from the browser to a web service. The data is being sent as JSON from the browser to the web service. I'm wondering if there is a different way to retrieve it as a string and then deseriali ...

javascriptasp.netajaxweb-services

Guide to making a circular animation image with JQUERY through Mouseover, TouchStart, Mouseend, and Touchend events

Trying to create a circular animation for rotating images. Found some help at this website: How to create circular animation with different objects using jQuery?. My current setup allows me to rotate using start and stop buttons. Is it possible to have the ...

javascriptjqueryanimation

Is it achievable to use the Jquery :after selector?

I am facing an issue with a menu script in my HTML code that looks like this: <ul class="cbp-tm-submenu" style="left: 50px;"> <li><a href="#" class="cbp-tm-icon-screen">Sorrel desert</a></li> <li><a href="#" ...

jqueryhtmlcssjquery-selectors

The button refuses to be centered despite utilizing the align-items: center property in CSS for the div element

Currently, I'm working on a div. <div className="cert-footer"> <Button type="submit" primary={true} fullWidth={false} > Confirm </Button> </div> The CSS I have fo ...

htmlcssreact-button

Tips for creating a specific client-side click inside a server control?

I've been exclusively using ASP.NET, but I'm starting to feel limited by the AJAX toolkit's animation capabilities. That's why I decided to explore jQuery as a way to enhance my user interface. Just to be clear, I'm completely new ...

jqueryasp.netclickclient-side

Creating a unique tab spacing effect using HTML and CSS

I'm currently working on my personal website and I'm looking to create a tab-like effect (similar to word processors) for showcasing projects along with their descriptions. Here's an example layout: ReallyLong NameProject Project1 Descr ...

htmlcssformatting

Problem with the "seconds" not being displayed for editing in the date range time selector

When using a date time range picker, I noticed that there is a field to edit "seconds" when editing the date (refer to link 1). However, when I switch to a date range picker, this option to edit seconds is not available (refer to link 2). Can you help me u ...

jquerybootstrap-4

What is the best way to create a text shadow effect for a heading element?

Is it possible to create a centered heading like the one in this image using only CSS, without using flexbox? [EDIT] Below is an example using flexbox. However, there are some limitations with this code as it doesn't allow reusing the same class for ...

htmlcss

Organizing and recycling React styled-components and native elements

As a backend engineer transitioning to frontend development, I am currently learning React and exploring styled-components for styling components. However, I am facing challenges in using styled-components with native React components and updating them in ...

javascriptreactjsstyled-componentsmodularity

Integration of Jqgrid with Jquery and Bootstrap for seamless compatibility

Can jqgrid 4.6.0 work with jQuery 3.4.1, jQuery UI 1.11.4, and bootstrap v 4.3.1? We attempted to use it and encountered rendering issues with most of the UI controls. Should we upgrade jqgrid to utilize the latest stack, or are we approaching this correc ...

jquerybootstrap-4jqgrid

Bootstrap navigation bar set vertically (rotated at -90 degrees)

Is there a way to achieve vertical alignment for Bootstrap Nav items like this example: https://i.sstatic.net/xCQ9c.png I am specifically not looking to create a layout where the items are stacked horizontally below each other. I attempted using transfo ...

twitter-bootstrapcsstwitter-bootstrap-4

Locate a specific text within a complex array of objects and retrieve the objects that contain the match as

I have an array of objects named input as shown below. Each object in the array contains a property vertical of type string, an array called platformList, and a nested object named radar_metadata. I am looking to implement a search functionality where I c ...

javascriptreactjsarraysloopsobject

What is the process for extracting information from one table based on a column's data in another table?

Let's consider two tables: Table 1 id | email 1 | email1 2 | email2 Table 2 userid | username 2 | user1 3 | user2 Now, with the help of sails.js associations, here is what I aim to achieve: I have a username = user1. What I need to a ...

javascriptmysqlnode.jssails.js

The element Component is not recognized even after importing the module and applying the CUSTOM_ELEMENTS_SCHEMA schema

Recently, I integrated PinchZoom into my Angular 6 project as a node module called ngx-pinch-zoom. It's important to mention that my project is also based on Ionic 4. Within my app.module.ts file, I imported the PinchZoomModule and included CUSTOM_EL ...

javascriptnode.jsangulartypescriptecmascript-6

Persistent error caused by unresponsive Tailwind utility functions

Currently, I am working on a Next.js application and encountered a strange error while adjusting the styling. The error message points to a module that seems to be missing... User Import trace for requested module: ./src/app/globals.css GET /portraits 500 ...

csstypescriptnext.jstailwind-css

Display multiple videos next to and below one another in a responsive layout

I am attempting to display multiple Vimeo videos responsively alongside and below each other. I have noticed that when using the embed-responsive feature, the videos may not align perfectly if different videos are used. However, they align perfectly when t ...

htmlcsstwitter-bootstraptwitter-bootstrap-3bootstrap-4

Is there a way to tally ng-required errors specifically for sets of radio buttons?

Currently, I am working on a form in AngularJS that includes groups of radio buttons. One of my goals is to provide users with an error count for the form. However, I have encountered a peculiar issue: After implementing this code to keep track of errors ...

javascriptangularjsformsvalidation

Tips on securing ajax post values against browser inspection techniques

function updateR() { $.ajax({ type: "POST", url: "update.php", data: { surprize: '12345678910', dpoint: point, dlevel: level } }).done(function( msg ) { // alert( "Data Saved: " + msg ); }); ...

phpjqueryajaxpostinspect

Showing MYSQL data in an html table

Hey there! I've been working on a website that features HTML5 video player to play videos. I have a "watch" page that retrieves data from the database based on the id parameter (watch.php?v=1). Now, I'm looking to display the most recent videos o ...

phpmysqlsqlhtml