Press the vertical navigation bar

My website is currently undergoing a major overhaul. I am looking to enhance its functionality, but I may have taken on more than I can handle.

You can find the link related to my query here:

On my top menu, there is a button located on the left side. It is styled using CSS and looks great. However, navigating through the menu is quite cumbersome, as it's easy to accidentally close the menu or submenus while moving the cursor.

I want users to be able to click on the button to open the navigation menu. Once opened, users should be able to move the cursor anywhere without the menu disappearing, unless they click outside the element or make a selection. Additionally, I want subsections to appear on the right that can be accessed by clicking, and moving the cursor away from the submenu should not make the main menu disappear. I have tried various solutions but have been unsuccessful so far due to my limited knowledge of jQuery and JavaScript.

Here is the HTML code I currently have:

<div id="navigation">
                <ul id="nav">
                    <li><a href="#">Navigation</a>
                        <ul class="menu">
                            <li><a href="#">Professional</a>
                                <ul class="submenu">
                                    <li><a href="#">Ambitions</a></li>
                                    <li><a href="#">Resume</a></li>
                                    <li><a href="#">Portfolio  ></a></li>
                                </ul>
                            </li>
                            <li><a href="#">About Myself</a>
                                <ul class="submenu">
                                    <li><a href="#">My Family</a></li>
                                    <li><a href="#">Interests</a></li>
                                    <li><a href="#">Scrap Book</a></li>
                                </ul>
                            </li>   
                            <li><a href="#">Social Life</a>
                                <ul class="submenu">
                                    <li><a href="#">Social Philosiphy</a></li>
                                    <li><a href="#">My Networks  ></a>
                                        <ul class="submenu">
                                            <li><a href="#" target="_blank">Facebook</a></li>
                                            <li><a href="#" target="_blank">Google+</a></li>
                                            <li><a href="#" target="_blank">Personal Tumblr</a></li>
                                            <li><a href="#" target="_blank">YouTube</a></li>
                                            <li><a href="#" target="_blank">Twitter</a></li>
                                            <li><a href="#" target="_blank">Deviant Art</a></li>
                                            <li><a href="#" target="_blank">Sound Cloud</a></li>
                                            <li><a href="#" target="_blank">Github</a></li>
                                            <li><a href="#" target="_blank">Diaspora</a></li>
                                            <li><a href="#" target="_blank">MySpace</a></li>
                                            <li><a href="#" target="_blank">about.me</a></li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>

Here is the CSS code for the menu:

#navigation {
    width:300px;
    height:40px;
    float:left;
    margin-top:-4px;
}

#navigation a {
    margin:0px auto;
    color:#ccc;
    outline:none;
    z-index:5; 
}

 #nav {
    padding:7px 6px 10px 0px;
    background:none;
    line-height: 100%;
    display:inline-block;
   }

 #nav li {
    margin:0 0 0 5px;
    padding:0 0 0 0px;
    float:left;
    position:relative;
    list-style:none;
  }

 #nav a {
    border-radius:20px 25px 0 10px;
    border-top:solid 3px #fff;
    border-left:solid 3px #fff;
    font-weight:bold;
    color:#fff;
    background:none;
    text-decoration:none;
    display:block;
    padding:8px 20px;
}

    /* hovers and current tabs */
#nav a:hover {
    border-radius:10px;
    background:none;
    color:#ccc;
}

  #nav .current a {
    border-radius:20px 25px 0 10px;
    background:none;
    color:#ccc;
    margin-bottom:0px;
    border-top:solid 3px #ccc;
    border-left:solid 3px #ccc;
}

  #nav li:hover > a {
    border-radius:20px 25px 0 10px;
    background:none;
    color: #ccc;
    margin-bottom:0px;
    border-top: solid 3px #ccc;
    border-left:solid 3px #ccc;
}

 #nav ul li:hover a, #nav li:hover li a {
    background:none;
    border:none;
    color:#333;
    border-top:solid 1px #dfdfdf;
}

 #nav ul a:hover { 
    color:black !important;
}

 /* dropdown */
  #nav li:hover > ul { 
    display:block; 
    background-color:#fff; 
    border-radius:10px 10px 10px 10px;
}

/* level 2 list */
  #nav ul {
    display:none;
    margin: 0;
    padding:0;
    width:150px;
    position:absolute;
    top:33px;
    left:0;
    background:#aaa;
    border:solid 1px #b4b4b4;
}

  #nav ul:hover { 
    background-color:#ddd;
}

  #nav ul li {
    z-index:5;
    font-weight:bold;
    float:none;
    margin:0px;
    padding:0px;
}

 #nav ul a { 
    font-weight:normal;
}
jqueryhtmlcssnavigationonclick

Answer №1

Check out this awesome fiddle: http://jsfiddle.net/8j4Rw/7/

$(document).on('click', function(e){
    if($(e.target).parents('#navigation').length > 0){
        /*clicked inside #navigation*/
    }else if($(e.target).attr('id') == 'display'){
        $('#navigation').toggle();
    }else{
        $('#navigation').hide();
    }
});

Implement this code for the Dropdown Menus:

$('#navigation>ul>li').has('ul').on('click', function(e){
    $('#navigation>ul>li>ul').hide();
    $(this).find('ul').show();
});
$('#navigation>ul>li>ul').on('mouseleave', function(e){
    $(this).hide();
});
$('#navigation').on('mouseleave', function(e){
    $('#navigation>ul>li>ul').hide();
});

(I crafted this response prior to the code you shared, so the structure may vary slightly - but the concept remains consistent)

Answer №2

Below is a straightforward click-navigation menu:

http://jsfiddle.net/jtbowden/WGVum/

The code is quite simple:

$('#navigation').on('click', 'a[href="#"]', function() {
    $('#navigation ul').hide();  // Conceal all elements on click
    var submenu = $(this).next('ul');  // Locate the corresponding sub-menu
    submenu.parentsUntil('#navigation').andSelf().show(); // Display the entire hierarchy above
});

In this scenario, we only acknowledge clicks with # as the href attribute. This could also be a class or any other attribute.

If you desire the menu to hide when clicking elsewhere, and toggle submenus on click, you can utilize this code:

$('#navigation').on('click', 'a[href="#"]', function() {
    var submenu = $(this).next('ul');
    $('#navigation ul').not(submenu).hide();
    submenu.parentsUntil('#navigation', 'ul').show().end().toggle();
    return false;
});

$(document).click(function() {
    $('#navigation ul ul').hide();
});

Check out the demo here: http://jsfiddle.net/jtbowden/WGVum/3/

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

Eliminating the muted attribute does not result in the sound being restored

I am looking to implement a feature where a video loads automatically without sound, but when a user clicks a button labeled "Watch with Sound", the video restarts from the beginning and plays with sound. Below is the JavaScript code: let videoButton = do ...

javascripthtmlvideo

Switch between attributes of two divs using jQuery

I am currently utilizing the hidden attribute to control the visibility of the .block div within each .item. However, my goal is to ensure only one block is visible at a time. How can I modify the code so that if one block is already visible and another i ...

jquery

Include the data-title attribute within the <td> elements of my datatables

To apply the magic of jQuery datatables to all my tables, I use datatables. For responsive tables, I add data-title to my td's. Is there a way to automatically add data-title to all my td's like below? <td data-title="Fruit">Apple</td&g ...

javascriptjquerydatatable

where should the arguments for the postMessage command be directed within the YouTube iframe?

Apologies if it seems like I'm reposting a similar issue, but this is actually a different problem with a unique approach. Currently, I have an iframe element: <iframe id="video1" width="970" height="546" src="https://youtube.com/embed/9IYRC7g2IC ...

jqueryiframeyoutubeyoutube-apipostmessage

Can you explain the meaning of this PHP syntax and why is this variable showing NaN?

Looking for question marks on Google can be quite challenging. Can someone explain this process step by step? $page = isset($_POST['page'])?$_POST['page']:"0"; I believe it means to check if $_POST['page'] is set, use that ...

phpjavascriptjquery

Using jQuery's .load() method to load a PHP file can result in an exponential increase in XHR finished loading time with each subsequent load

There seems to be an issue with my code using .load() to load a PHP page into a div whenever the navbar or link is clicked. After multiple clicks, I noticed that the "XHR finished loading" increases exponentially and it appears that the same PHP file is be ...

javascriptphpjqueryhtmlperformance

PHP Multiple Uploads is a feature that allows users to

I'm currently attempting to utilize the dropzone JS plugin in combination with PHP for the purpose of uploading multiple files and then displaying each file's URL. Here is my progress so far: $upload_dir = 'files'; for($i=0; $i&l ...

javascriptphphtmlupload

Could there be another script taking control of jQuery(window).resize()?

When testing the code in both Chrome and Firefox, I noticed that only the NATIVE RESIZE event is being logged: window.onresize = function(){ console.log( "NATIVE RESIZE" ) } jQuery(window).resize(function(){ console.log( "JQUERY RESIZE" ) }); Strangely, ...

jquerywordpresseventsresizewindow-resize

Trick to enable editing in Bootstrap Select Combobox

Is there a way for users to add their own options to bootstrap-select? Greetings! I have spent some time searching for a straightforward solution that is compatible with Bootstrap 4 styling. Despite exploring various suggestions, as well as unresolved thr ...

javascriptjquerybootstrap-4comboboxbootstrap-select

Changing the meta viewport tag

Trying to adjust the meta viewport tag based on the visual viewport width. I understand the process, but it's not functioning correctly. It seems like the JavaScript code might be executing too late for changes to apply effectively. While uncertain, t ...

jquerywidthmeta-tagsviewport

What is the best way to retrieve table field values and display them in a modal box?

Data Table Display <tbody id="batch_view" class = "a-checkbox"> <% @batches.each do |batch| %> <tr> <td class="<%= batch.id %>"><%= batch.date.strftime("%Y-%m-%d") if !batch.date.nil? %></td> <td> ...

jqueryruby-on-railsajaxmongodb

Triggering the retrieval of complete HTML content by clicking a button in order to load extra elements using Selenium

My goal is to scrape a webpage and gather all the links present on it. The page displays 30 entries and to access the complete list, one must click on a "load all" button. Below is the Python code snippet I'm currently using for this task: from sele ...

csspython-3.xseleniumweb-scrapingbeautifulsoup

Can you tell me the standard font size in Internet Explorer 9?

After examining this particular website, I found the default styling used by IE 9. The body selector in particular appears as follows: body { display: block; margin: 8px; zoom: 1; } I would have expected a font-size declaration in this code, but su ...

htmlcssinternet-explorerinternet-explorer-9

What steps can be taken to prevent a wrapper's CSS from affecting its enclosed elements?

My container div includes some opacity and auto height that I don't want to affect all elements within it. Is there a way to preserve the container's styles without impacting its contents? ...

htmlcss

Can an HTML element have a dynamic scrollbar?

Is it possible to create a dynamic scrollbar with primefaces p:panel? Whenever I add the div, the scrollbar appears fixed on the page. How can I make this div position itself according to the user's browser, specifically within a p:panel? ...

csshtmlprimefaces

Implementing dynamic database content into a Wow Slider on a jQuery Mobile platform

I am currently using static data in a slider with wow slider jquery mobile. However, I would like to retrieve data from a database and display it in the slider. Can someone provide suggestions on how to do this? Thank you. <script type="text/javascri ...

phphtmljquery-mobile

Automatically save a dropdown menu selection

Is there a way to automatically save the data selected in a drop down list without having to click on a save button? public ActionResult SelectFeedBack(int id) { YelloAdminDbContext db = new YelloAdminDbContext(); ViewBag.FeedBack ...

htmlasp.net-mvc-4asp.net-mvc-controller

Arrange the image in a way that flows smoothly with the text

I want to achieve the effect of having a picture of a Pen positioned behind the text "Create" on the left side. It looks good at full size, but the positioning gets messed up when the screen size is adjusted. How can I make it responsive so that the image ...

csshtmltwitter-bootstrap

Rows in a table will not decrease when added anew

On a page that allows adding and deleting rows from a table of input fields, the following code functions properly for existing fields. However, when attempting to add new rows and delete them in a sequential manner that requires replacing the ID and name ...

javascriptjquery

The datepicker function is malfunctioning in a div that has been dynamically loaded through

I am experiencing an issue with loading a div populated by ajax. The datepicker does not seem to be called when the content is loaded this way. Initially, I had the datepicker loaded in the header of the main page, but even after trying to load it within ...

javascriptjqueryajaxdatepicker