jQuery - Navbar with both horizontal and vertical orientation

I'm new to JavaScript and jQuery, and I'm looking to create a vertical nav/slider that follows the cursor when hovering over horizontal navbars links to reveal sub-links, essentially creating a dropdown menu effect.

While I don't expect anyone to do the entire job for me, I would appreciate some tips on how to get started.

Experimental Fiddle of HTML and CSS

CODE:

HTML

<section class="container">
  <div class="fs-nav-vr">
    <ul>
      <li>Link 1</li>
      <li>Link 2</li>
      <li>Link 3</li>
    </ul>
  </div>
  <div class="pusher"></div>
  <section class="sc-nav">
    <div class="fs-nav">
      <nav>
        <div onclick=" window.location = 'http://google.com'">
          <a>Link 1</a>
        </div>
        <div>
          <a href="#">Link 2</a>
        </div>
        <div>
          <a href="#">Link 3</a>
        </div>
      </nav>
    </div>
  </section>
</div>

CSS

.fs-nav-vr {
  display: block;
  top: 0;
  height: 100%;
  width: 10%;
  padding: 0;
  margin: 0;
  opacity: 0.6;
  z-index: 2;
  left: 15%;
  background: red;
  position: absolute;
}
.fs-nav {
  height: 15%;
  display: block;
  width: 100%;
  top: 65%;
  padding: 0;
  margin: 0;
  color: relative;
  text-align: center;
  background-image: linear-gradient(to bottom, rgba(61, 61, 61, 0.7) 17%, rgba(87, 84, 87) 66%);
  opacity: 0.8;
  overflow: hidden;
}
.fs-nav nav div {
  display: inline-block;
  text-align: center;
  cursor: pointer;
  border: solid 1px gray;
  padding: 2%;
  margin: 0;
  font-size: 40px;
  background-color: #999999;
  transition: background-color 0.2s ease-in-out;
}

Answer №1

Get a great start by understanding what needs to be done

HTML

<div class="h-nav"> 

<div class="vert-nav-container">
<a class="link1" href=""> option 1 </a>
<a class="link2" href=""> option 2 </a>
<a class="link3" href=""> option 3 </a>

    <div class="v-nav">
        <ul style="margin-top:40px">
            <li>a</li>
            <li>b</li>
            <li>c</li>
        <ul>    
    </div>

</div>

jQuery

$(".link1").mouseenter(function(){
     $(".v-nav").css({'left':'0px'})
});

$(".link2").mouseenter(function(){
     $(".v-nav").css({'left':'90px'})
});

$(".link3").mouseenter(function(){
    $(".v-nav").css({'left':'180px'})
});

For each link, there is a mouse event that can trigger additional actions, such as displaying different sets of links for each option.

http://jsfiddle.net/4qdyK/36/

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

Learn the step-by-step process of graphing equations in React similar to Desmos

I am currently attempting to create a graph of an equation based on user input, similar to how it is done on Desmos () For example While I have come across a function plotting tool at , I have encountered difficulties when trying to plot equations contai ...

Having trouble with the dynamic form not submitting correctly using AJAX in PHP?

I am facing an issue in my code while trying to dynamically generate a form in a table and submit it. The problem is difficult for me to solve. $(document).ready(function() { $('#btnsummary').on('click', function() { ...

Tips for integrating AngularJS into Zend Framework 2

Hi there! I am a newcomer to Zend Framework 2 and I am exploring the integration of AngularJS into my project. Currently, I am calling a function in the controller like this: return new ViewModel(array( 'result' => $result, 'use ...

Interacting with an MVC controller via Ajax for sending and retrieving data

I am having an issue with my code where the parameter 'a' in my controller is always null. Can anyone help me figure out what I'm doing wrong? Here is the code snippet: View: <input type="text" id="zipcode" /> <script src="http: ...

Delete the element that was generated using jQuery

Is there a way to add and remove an overlay element using JavaScript? I am struggling to get JavaScript to remove an element that was created with JavaScript. Any suggestions? Check out this JS Fiddle example Here is the HTML code: <div id="backgroun ...

Give a jQuery Mobile flipswitch a new look

Currently, I am using jQuery Mobile and recently attempted to refresh a flipswitch. However, upon executing the code $("#flipEnabled").slider("refresh");, I encountered an error in the console: Uncaught Error: cannot call methods on slider prior to initial ...

Implementing promise-based looping for multiple GET requests in node.js

As a newcomer to promises, I've been searching for the right answer or pattern without much luck. Currently using node.js v4.2.4 and exploring The task seems simple enough... I need to execute multiple asynchronous blocks in a specific order, with on ...

Template string use in Styled Components causing issues with hover functionality

I have a styled component where I am trying to change the background color when its parent is hovered over. Currently, the hover effect is not working and I'm unsure why. const Wrapper = styled('div')` position: relative; margin-bott ...

Using a PHP variable within a JavaScript function to incorporate its value into a select field, ultimately generating a response using JavaScript

As I work on developing a shopping cart, I have successfully stored the total value of the items in the cart in a PHP variable named $total. I attempted to transfer this value into a JavaScript variable labeled Shipping fee. Subsequently, I created a form ...

Adding styles dynamically using methods is not supported in Vue.js

When it comes to adding styles to an HTML element from methods, I ran into a small hiccup. Here's what I tried: <div class="add-profile-img" v-bind:style="getBackgroundImg()"> The method in question is: getBackgroundImg: function() { return { ...

Using blending modes with gradient colors in an SVG design

I'm struggling to get my logo to change colors upon scrolling into a button with similar gradient colors, but I just can't seem to make it work. Can anyone lend me a hand? Thank you! Take a look at my Logo. I've attempted to add some styles ...

Is it possible to incorporate a variable into my fetch request?

I am currently learning how to use react native and am studying some examples. Encountered a roadblock: While attempting to pass latitude in my fetch call, I encountered an error stating that "latitude" does not exist. class App extends React.Component ...

The functionality of hiding and displaying div elements is malfunctioning

I am currently working on a side menu that contains two buttons. My goal is to display the content of the profile div by default, and when the user clicks on the My reviews button in the sidebar, I want to hide the content of the profile div and show the r ...

Tips for exporting an array of dynamic JSON objects to CSV using Angular

I am facing a challenge in exporting an array of JSON objects to CSV as the number of key-value pairs can vary, leading to additional columns in some objects. Currently, I am using the Angular2CSV package for export functionality, but it requires all colum ...

Running two servers at the same time using nodemon might seem complex, but it

Is it possible to run two servers (www.js and apiServer.js) simultaneously using nodemon? I have set the value for the "start" key in package.json as https://i.stack.imgur.com/r8M7p.jpg After running nodemon in the command prompt with the current working ...

Unable to retrieve /ID from querystring using Express and nodeJS

I am brand new to the world of Express and nodeJS. I have been experimenting with query strings and dynamic web pages, but I keep getting an error saying that it cannot retrieve the ID. I'm completely lost as to where I might have made a mistake. An ...

Strategies for preserving context throughout an Ajax request

In my project, I am looking to implement an Ajax call that will update a specific child element within the DOM based on the element clicked. Here is an example of the HTML structure: <div class="divClass"> <p class="pClass1">1</p> &l ...

Prevent the use of the + or - symbols within the body of a regular expression when

function validateNumberInput(){ userInput = document.getElementById('txtNumber').value; var numberPlusMinusRegex = /^[\+?\-?\d]+$/g; if (userInput.match(numberPlusMinusRegex)) { alert('Vali ...

How to print a Base64 encoded file with the Print.js library

I am facing an issue with printing a Base64 file. Despite my efforts, the file does not print as expected. function convertToBase64() { var selectedFile = document.getElementById("inputFile").files; if (selectedFile.length > 0) { var fi ...

Executing an AJAX request on Rails 3 without triggering a redirect by using a link/button

What is the most effective method for executing an ajax command using a link in Rails 3.1 with jQuery? Currently, I am attempting to use a link to trigger code from the "update_me" controller action. The line in views/products/new.html.erb looks like this ...