Steps for implementing a Toggle Navigation Bar in CSS

I'm looking to implement a show/hide navigation menu similar to the one showcased in this inspiration source:

Code Snippet (HTML)

<div id="menus">
<nav id="nav">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">BIOGRAPHY</a></li>
<li><a href="#">GALLERY</a></li>
<li><a href="#">WRITINGS</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</nav>
</div>

Code Snippet (CSS)

#nav ul{
margin-top:10px;
margin-bottom:20px;
padding:50px;
}
#nav ul li{
float:left;
padding:48px;

}
#nav a:link{
color:#999;
}
#nav a:visited{
color:#000;
}
#nav a:hover{
color:#999;
border-bottom-style:solid;
}
javascripthtmlcss

Answer №1

To achieve the desired effect, we can simply adjust the top property of the ul links to default to a negative value such as top:-70px;. Then, upon hovering over the header, we can change the top value of the ul to 0 by adding a class named show using jQuery.

For an example implementation, you can check out this link.

The key elements to focus on in the code are the properties of the ul and header.

HTML:

<header>
  <nav>
    <ul class="menu">
      <li><a href="#">menu</a></li>
      <li><a href="#">menu</a></li>
      <li><a href="#">menu</a></li>
      <li><a href="#">menu</a></li>
    </ul>
  </nav>
</header>

CSS:

ul {
 -webkit-transition: all 0.6s;
  position: relative;
  top: -70px;
}
.show {
  top: 0;
}

(the transition creates a smooth animation instead of an abrupt change)

JS:

$("header").hover(function() {
  $('ul.menu').toggleClass('show')
})

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

Angular: Built-in solution for managing unhandled HTTP errors

I have implemented a default handler for handling http errors in my angularjs app as shown below: myapp.config([ '$httpProvider', function($httpProvider) { $httpProvider.responseInterceptors.push('errorInterceptor') }]) The errorI ...

javascriptangularjserror-handlingpromise

Obtain the value from the controller of the amazing-rating component

Currently utilizing the amazing Rating AngularJS library available at https://github.com/bandraszyk/awesome-rating I am interested in understanding how to retrieve the selected value and store it in my controller. The $scope.rating is returning undefined ...

javascriptangularjs

Curved edges on a text box featuring a scroll bar

I'm facing an issue with my website where I have a large amount of text in an html textarea that requires a scroll bar. The problem is, I'd like to add rounded corners to the textarea, but it doesn't look good with the scroll bar. Below is ...

htmlcssscrolltextareaborder

Initiate a function once the innerHTML content in Angular has been completely loaded

I'm curious to know if it's possible in Angular to receive a notification when the Inner HTML has finished loading. I have a web application that retrieves an SVG image from a server and I need to display it as innerHTML in order to interact with ...

javascripthtmlangulartypescriptsvg

"Learn to easily create a button within a table using the powerful functionality of the dataTable

I need to add a button to each row in a table. I managed to achieve this with the code below, but there's a problem - every time I switch between pages, the button keeps getting added again and again. It seems like the button is generated multiple tim ...

javascriptjquerydatatable

Here's a quick tip for adding a new line in your input message in Angular - just press Shift +

I need help with my chat box input field. I want it to be able to handle new line inputs similar to Facebook's chatbox. Here is a screenshot of My Chat Box: [1]: My HTML code for the input field: <form class="form" #msgForm="ngForm ...

htmlangularinputtextchat

Incorporating a transparent icon onto an HTML background

I'm struggling to place a transparent white envelope icon on a green background. I don't understand why it's not working, especially when the telephone icon worked fine. Side Question.: Any recommendations for how to add something above the ...

javascripthtmlcss

Stop the Router from Displaying the Page momentarily prior to Redirecting

Currently, I have set up a session context for my NextJS application where users accessing pages within the /app/ directory are required to undergo an authorization check before being granted access. Although the logic is functioning correctly in redirect ...

javascriptreactjsnext.js

Is there a specific measurement or scale for the dragging feature in jQuery UI draggables?

I'm interested in adjusting the position of my draggable element based on the distance moved by the mouse. For instance, if the scale is 1:2 and the cursor is moved 10px to the right, then the draggable should move 20px. I already have my draggable ...

javascriptjqueryhtmljquery-ui

Tips for accessing a variable located in a different directory

I'm facing some confusion regarding creating a global variable that can be accessed in another file. Currently, I have a chat and login folder setup. Within the login folder, there are three possible users to choose from. When a user clicks on one of ...

javascriptangularjsglobal-variables

Exploring the World of Node.js Event Handling in JavaScript

After reviewing the provided code snippet: binaryServer = BinaryServer({port: 9001}); binaryServer.on('connection', function(client) { console.log("new connection"); client.on('stream', function(stream, meta) { console.log(& ...

javascriptnode.js

Tips for sending a form using Angular 1.5.8 and Java Servlet via POST method

After reading various tutorials and online documentation, I'm still struggling to figure out how to pass parameters from a JSP form. Below is the JavaScript script I am using: var app = angular.module('myApp', []); app.controller('Form ...

javascriptjavaangularjsjspservlets

Utilizing jQuery to implement a function on every individual row within a table

I have a collection of objects that requires applying a function to each item, along with logging the corresponding name and id. Below is the snippet of my code: var userJson = [ { id: 1, name: "Jon", age: 20 }, { ...

javascriptjquery

How come my links aren't initiating jQuery click events?

Today, I decided to experiment with jQuery and encountered an issue. On my webpage, there are multiple links displayed in the format shown below: <a class="a_link" id="a_id<#>" href="#">Click me</a> The value <#> is a number gener ...

javascriptjqueryajax

Issues with Javascript functionality on aspdotnetstorefront site

Lately, I've been facing some challenges with my Javascript and jQuery codes when trying to implement them in the storefront. Despite attempting different methods to create a slider, none seem to work within the store environment - even though they fu ...

javascriptjqueryaspdotnetstorefront

Is it just me, or does `position: fixed;` not actually fix the element to the top?

I'm experiencing an issue where the element isn't fixed to the top of the page, despite using the position: fixed; property. I've tried several solutions including: Setting a z-index of 9999 Wrapping all elements in a single container (.fi ...

htmlcss

Triggering the 'Next' function with a key press event

Currently, I am utilizing the following code to manage the keydown event for the tab and enter keys within an input field. $(document).on('keydown', ".className" , function(e) { var keyCode = e.keyCode || e.which; alert(keyCode) / ...

htmljqueryeventsandroid-softkeyboardkeydown

This JavaScript function is designed to strip HTML elements from a given

"p" tags are disappearing after running the javascript, but they are needed for structuring purposes. Is there a way to retain the html tags in the hidden/secondary text block even after the javascript manipulation? function AddReadMore() { //This lim ...

javascriptjquery

Unable to resize the div to fit the content

My container div is not adjusting its height based on the content inside. It expands according to the header and navigation divs, but not the sidebar which is nested inside another div. Here is the HTML structure: <div id="container"> <div ...

htmlcssheight

The custom created THREE.Curve is not rendering correctly

Following advice from this solution, I have implemented a linearly interpolated curve in the code below: THREE.Linear3 = THREE.Curve.create( function ( points, label /* array of Vector3 */) { this.points = (points == undefined) ? [] : points; ...

javascriptthree.js