Zurb's Vertical Navigation Bar: A Stylish and Functional Design

I attempted to replicate the left navigation bar from this link:

The responsive navigation bar and contents on the right caught my attention.

Currently, I am working on a project that requires a similar navigation bar. While I am proficient in HTML and CSS, JavaScript is not my strong suit, making it challenging for me to create such a navigation bar.

I need assistance in developing this navigation bar without relying on any CSS frameworks.

A codepen or jsfiddle demonstration would be greatly appreciated.

Edit:

Some developers have asked about my progress. Here's what I've come up with so far:

HTML CODE:

Your modified HTML code here

CSS Code:

Your modified CSS code here

Link to your work

This is my vision for the navigation bar:

  1. Expand the navigation bar only upon clicking (may require JS)

  2. All content should responsively adjust when the navigation bar expands, similar to the example link provided earlier.

These are the enhancements I would like to incorporate into my project.

javascripthtmlcsszurb-foundation-5

Answer №1

Foundation 6 has significantly improved their components by streamlining them. Previously, multiple components were necessary to create menus, but now only one versatile component is needed.

Alternatively, you can utilize HTML & CSS to achieve the same results. Below, I have integrated font-awesome for icons.

ul {
  margin: 0px;
  padding: 0px;
  list-style-type: none;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.var_nav {
  position: relative;
  background: #ccc;
  width: 100px;
  height: 70px;
  margin-bottom: 5px;
}
.link_bg {
  width: 70px;
  height: 70px;
  position: absolute;
  background: #008000;
  color: #fff;
  z-index: 2;
}
.link_bg i {
  position: relative;
}
.link_title {
  position: absolute;
  width: 100%;
  z-index: 3;
  color: #fff;
}
.link_title:hover .icon {
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  transform: rotate(360deg);
}
.var_nav:hover .link_bg {
  width: 100%;
  background: #008000;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.var_nav:hover a {
  font-weight: bold;
  -webkit-transition: all .5s ease-in-out;
  -moz-transition: all .5s ease-in-out;
  -o-transition: all .5s ease-in-out;
  -ms-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
}
.icon {
  position: relative;
  width: 70px;
  height: 70px;
  text-align: center;
  color: #fff;
  -webkit-transition: all .5s ease-in-out;
  -moz-transition: all .5s ease-in-out;
  -o-transition: all .5s ease-in-out;
  -ms-transition: all .5s ease-in-out;
  float: left;
  transition: all .5s ease-in-out;
  float: left;
}
.icon i {
  top: 22px;
  position: relative;
}
a {
  display: block;
  position: absolute;
  float: left;
  font-family: arial;
  color: #fff;
  text-decoration: none;
  width: 100%;
  height: 70px;
  text-align: center;
}
span {
  margin-top: 25px;
  display: block;
}
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet" />


<nav>
  <UL>
    <li class="var_nav">
      <div class="link_bg"></div>
      <div class="link_title">
        <div class=icon>
          <i class="icon-home icon-2x"></i>

    </li>
    <li class="var_nav">
      <div class="link_bg"></div>
      <div class="link_title">
        <div class=icon>
          <i class="icon-envelope icon-2x"></i>

    </li>
    <li class="var_nav">
      <div class="link_bg"></div>
      <div class="link_title">
        <div class=icon>
          <i class="icon-wrench icon-2x"></i>

    </li>
    <li class="var_nav">
      <div class="link_bg"></div>
      <div class="link_title">
        <div class=icon>
          <i class="icon-cloud-upload icon-2x"></i>

    </li>
  </UL>
</nav>

Update ::

I stumbled upon this on codepen, which showcases a vertical navigation bar example using Zurb.

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

Oops! It looks like there was an error. Remember that AJAX events should be connected to the

I am completely new to the world of Ajax and unfortunately, I encountered an error message in my browser: "JQMIGRATE: AJAX events should be attached to document: ajaxComplete" After some research, it seems like I need to incorporate certain Ajax functi ...

javascriptjqueryajax

Using the goBack function in React Router does not add the previous location to the stack

In React Router v4, I have a list page and a details page in my web application. I want to implement a 'Save and close' button on the details page that redirects the user back to the list page when clicked. However, I noticed that after the user ...

javascriptreactjsreact-router

Issue with mobile browser validation for text field functionality not functioning properly

Issue with text box validation on mobile browsers for my Angular application Mobile Browsers: Chrome, Samsung Browser (not working in both) Expected Input: Numbers 0-9 and Alphabets A-Z only in the text field My Approach : 1. Initial Attempt: I attempted ...

javascriptangularjsregexangular-reactive-formsangular-forms

Tips on retrieving PHP variable values along with HTML response using AJAX in PHP

I am looking to retrieve 2 variables: 1) The total number of records from the mysqli query performed in search_members.php 2) A boolean value indicating whether any results were found Below is the code I have written: <input type="button" value="Sea ...

javascriptphpjqueryajax

Avoid replacing CSS properties, instead use jQuery to supplement them

Can anyone help me figure out how to use the jquery .css() function without overwriting existing values, but instead adding additional values to css properties? For example, I have an element that currently has the css transform:translate(-50%, -50%). I w ...

jquerycsscss-transforms

Looking to show an image when a checkbox is ticked and hide it when it is unticked in HTML?

How do I make a specific image appear when a user clicks on a checkbox? I'm unsure if I should use jQuery, Ajax, or another method. What is the best approach for this task? Your assistance would be greatly appreciated. I have successfully created the ...

javascriptjqueryajaxhtml

Why are my API routes being triggered during the build process of my NextJS project?

My project includes an API route that fetches data from my DataBase. This particular API route is triggered by a CRON job set up in Vercel. After each build of the project, new data gets added to the database. I suspect this might be due to NextJS pre-exe ...

javascriptnext.jsnext.js13nextjs-dynamic-routing

Enabling a JSON file property to be clickable as needed

I am working with a JSON file obtained from an API call, which contains various objects. My goal is to display the message property of each object, some of which may contain hyperlinks within the message. Here is the HTML code I have implemented to make t ...

javascripthtmljsonobjectdom

Mathematics - Determined the dimensions of an adjusted image size

Currently, I am implementing a basic mathematical method to crop an image. My approach involves utilizing the jQuery plugin called imageareaselect.js to overlay an adjustable layer on top of an image. By resizing this layer with the cursor and clicking a b ...

jqueryhtmlcss

Can components be designed in a way that includes elements such as buttons or text areas in the code, but allows for them to be excluded when the component is used?

I have a custom form component that I designed. Depending on certain cases, I want the form to display either a button or a text field instead of the input field as currently coded. function FormTypeOne(props) { return ( <form className={classes.f ...

javascriptreactjsnext.jsjsx

What is the best way to display nested JSON in JSX within a React Native application?

I need help with rendering nested JSON inside my JSX. Below is the JSON response: [{ "data": { "total_students": 13, "seats": "", "categories": [{ "id": 28, "name": "Economy", "slug": "econom ...

javascriptjsonreact-nativejsx

Three.js: Modifying values within dat.GUI is not allowed

I have added a "comboBox" to my dat.GUI instance in order to select possible values. However, when I run my application, the dat.GUI appears with the comboBox but it seems to be frozen - I cannot change its default value. Below is the code snippet that dem ...

javascriptthree.jsdat.gui

Error: JSDOM - The document variable has not been declared

After creating a basic webpage that displays a single message, I decided to experiment with JSDOM and encountered an error. Despite researching online examples and Stack Overflow questions, I have struggled to resolve even the most straightforward scenario ...

javascripthtmljsondomjsdom

Changing the default yarn registry for a specific project

Typically, I fetch packages from the internal server by using the command: yarn config set registry http://custom-packages-server.com However, for a new project, I want to switch back to the default registry without affecting other projects. If I try cha ...

javascriptnpmyarnpkg

AngularJS encounters a lack of 'Access-Control-Allow-Origin' header

I have encountered an issue with my AngularJS application. I am attempting to send data to a third-party URL for storage on their server. However, when I execute the code below, I receive the following error message: XMLHttpRequest cannot load . Response t ...

javascriptangularjscors

Retrieve the entity object and convert it into JSON format using json_encode

I have an array that looks something like this: $general_informations['company'] = $company_db In this array, $company_db is an Entity object with properties, such as: $city = $company_db->getCity(); After using json_encode(), I want to re ...

javascriptphpjsonobjectencode

Determining the repetition and placement of background images when employing multiple backgrounds

Is it possible to apply two background images to the same div? I want one image to repeat along the x-axis and the other to appear only once. I've tried using multiple background images, but I'm not sure how to target specific rules for each bac ...

cssbackgroundbackground-image

Storing customer information securely on the server with the help of Node.js

After spending some time experimenting with Node.js on my local machine, I've realized that my understanding of HTTP requests and XHR objects is quite limited. One particular challenge I've encountered while using Node is figuring out how to effe ...

javascriptajaxnode.jsfile-io

Anchored text is obscured by a fixed Bootstrap 4 navigation bar at the top

I'm currently developing a website that utilizes bootstrap 4. I have successfully fixed the <nav> element to the top of the page using the fixed-top class. Despite applying padding-top to the <body> tag as recommended, I am encountering an ...

htmlcsstwitter-bootstrapbootstrap-4

Slide the menu off to the right

Check out these images to see my progress: Main Image. When you click on the menu, everything shifts right. I've managed to set up the push menu, toggle switch menu, and main divs. Now I need help with centering the 3 lines that are clicked within th ...

htmlcssvertical-alignmentnav