Dynamic Menu Navigation (No Bootstrap Required)

My Navbar is working perfectly in the original mode but when the screen width is less than 950px, it displays the buttons stacked vertically. However, the dropdown button opens the dropdown content on the wrong side. I want the dropdown content to appear under the dropdown button instead. Is there an issue with my code? Any assistance would be greatly appreciated. Here's my code:

$(function() {
  var ulLi = $('nav ul > li');
  var fa = $('nav ul > li:last-of-type a .fa');
  $('nav ul').append('<ol></ol>');
  $('nav').each(function() {
    for (var i = 0; i <= ulLi.length - 3; i++) {
      $('nav ul > ol').append("<li>" + i + "</li>");
      $('nav ul > ol > li').eq(i).html(ulLi.eq(i + 1).html());
    }
  });

  $('#attr_nav').click(function() {
    $('nav ul > li:last-of-type').parent().children('ol').slideToggle(500);

  });
});
[Up to you how you want to write this part]
<link rel="stylesheet" href="[your font awesome stylesheet link]">
<script src="[your jQuery script link]"></script>

<nav>
  <ul>
    [Your navigation links]
  </ul>
</nav>

javascripthtmlcss

Answer №1

Make sure to set position:relative for nav ul li and apply the following CSS styles to the dropdown:

.dropdown-contentd{
  width:100%;
} 

.dropdown-contentd a{
  text-align:center;
}


$(function() {
  var ulLi = $('nav ul > li');
  var fa = $('nav ul > li:last-of-type a .fa');
  $('nav ul').append('<ol></ol>');
  $('nav').each(function() {
    for (var i = 0; i <= ulLi.length - 3; i++) {
      $('nav ul > ol').append("<li>" + i + "</li>");
      $('nav ul > ol > li').eq(i).html(ulLi.eq(i + 1).html());
    }
  });

  $('#attr_nav').click(function() {
    $('nav ul > li:last-of-type').parent().children('ol').slideToggle(500);

  });
});
* {
  box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

nav ul li a {
  color: #FFF;
  text-decoration: none;
  font-size: 16px;
  -webkit-transition-duration: 0.4s;
  transition-duration: 0.4s;
  padding: 15px;
  font-family: Ubuntu;
}

nav ul li a:hover {
  text-decoration: none;
  color: #444;
}

nav ul li{
  position:relative
}

.thum {
  background-color: gray;
}

nav ul li a.coinsnumber:hover {
  text-decoration: none;
  color: white;
  cursor: pointer;
}

#attr_nav .dropdown-contentd {
  position: relative;
}

#dropdownd .dropdown-contentd {
  /* display: none;*/
  max-height: 0;
  transition: max-height 0.15s ease-out;
  overflow: hidden;
  position: absolute;
  top: 49px;
  background-color: royalblue;
  color: #FFF;
  /* min-width: 160px;*/
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  z-index: 1;
  /*border: 1px solid black;*/
  margin: 0;
  padding: 0;
  /* padding-top: 10px;
  padding-bottom: 10px;*/
  /* transition: all .3s ease;*/
}

#dropdownd:hover .dropdown-contentd {
  max-height: 500px;
  transition: max-height 0.25s ease-in;
  /*  padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;*/
}

.a-padding {
  padding-left: 10px;
  padding-right: 10px;
}


/*nav ul li .dropdownd:hover .dropdown-contentd {
  max-height: 500px;
    transition: max-height 0.25s ease-in;
}*/

.dropdown-contentd a {
  float: none;
  color: black;
  padding: 12px 16px;
  color: #ffffff;
  text-decoration: none;
  display: block;
  text-align: left;
  transition: all .3s ease;
  background-color: royalblue;
}

.dropdown-contentd a:hover {
  color: #444;
}

.dropdownd:hover .dropdown-contentd {
  display: block;
}


/* End General */


/* Start Navbar */

nav ul {
  background-color: royalblue;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

nav ul>li {
  padding-left: 20px;
  padding-right: 20px;
  padding: 15px;
  display: inline-block;
  transition: all .3s ease;
  margin-left: -5px
}

nav ul>ol {
  position: absolute;
  top: 49px;
  right: 0;
  background: royalblue;
  text-align: center;
  list-style: none;
  display: none;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

nav ul>ol>li{
  width: 100vw;
  color: #FFF;
  margin: 0;
  padding: 0;
  padding-top: 10px;
  padding-bottom: 10px;
  transition: all .3s ease;
}

.dropdown-contentd{
  width:100%;
} 

.dropdown-contentd a{
  text-align:center;
}

nav ul>ol>li:hover a {
  margin: 20px;
}

nav ul>ol>li:hover {
  color: #444;
  cursor: pointer
}

#attr_nav:hover {
  cursor: pointer;
}

nav ul input {
  opacity: .7;
  padding: 5px;
  float: right;
  display: none
}


/* Start Menue Right */


/* Start Media Query */

@media screen and (max-width:950px) {
  nav ul>li:not(:first-child) {
    display: none;
  }
  nav ul>li:nth-last-of-type(2) {
    display: inline-block;
  }
  nav ul>li:last-of-type {
    display: inline-block;
  }
}

@media screen and (max-width:370px) {
  nav ul>li:first-child {
    display: none;
  }
}

@media screen and (max-width:270px) {
  nav ul>li:last-of-type {
    display: none;
  }
}

@media screen and (min-width:950px) {
  nav ul>ol>li {
    display: none
  }
  nav ul>li:nth-last-of-type(2) {
    display: none
  }
}

.dropdowncontentn {
  background-color: royalblue;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<nav>
  <ul>
    <li><a href="home.php">Home</a></li>
    <li><a href="earnpoints.php">Earn Coins</a></li>
    <li><a href="getrewards.php">Get Rewards</a></li>
    <li><a href="referrals.php">Referrals</a></li>
    <li><a href="vouchers.php">Vouchers</a></li>
    <li>
      <div id="dropdownd">
        <a href="#" class="dropbtnd">More</a>
        <i class="fa fa-caret-down"></i>
        <div class="dropdown-contentd">
          <a class="dropdowncontentn a-padding" href="leaderboard.php">Leaderboard</a>
          <a class="dropdowncontentn a-padding" href="partnerships.php">Partnerships</a>
          <a class="dropdowncontentn a-padding" href="contact.php">Contact us</a>
          <a class="dropdowncontentn a-padding" href="socialmedia.php">Social Media</a>
          <a class="dropdowncontentn a-padding" href="settings.php">Settings</a>
        </div>
      </div>
    </li>
    <li>
      <a id="attr_nav">
        <i class="fa fa-bars"></i>
      </a>
    </li>
    <li class="thum" style="float:right;margin-right:25px;">
      <a onClick="navbar_coins_refresh.php" class="coinsnumber">
        <?php include 'navbar_coins.php'; ?>
      </a>
    </li>
  </ul>
</nav>

Answer №2

To ensure proper positioning of the dropdown menu, apply the following styles: Add `position:relative` to the parent element with ID `#dropdownd`. Then, set `position:absolute` and `top:value` styles for the child element with class `.dropdown-contentd`.

$(function() {
  var ulLi = $('nav ul > li');
  var fa = $('nav ul > li:last-of-type a .fa');
  $('nav ul').append('<ol></ol>');
  $('nav').each(function() {
    for (var i = 0; i <= ulLi.length - 3; i++) {
      $('nav ul > ol').append("<li>" + i + "</li>");
      $('nav ul > ol > li').eq(i).html(ulLi.eq(i + 1).html());
    }
  });

  $('#attr_nav').click(function() {
    $('nav ul > li:last-of-type').parent().children('ol').slideToggle(500);

  });
});
* {
  box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

nav ul li a {
  color: #FFF;
  text-decoration: none;
  font-size: 16px;
  -webkit-transition-duration: 0.4s;
  transition-duration: 0.4s;
  padding: 15px;
  font-family: Ubuntu;
}

...
</nav>

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

Incorporating a JavaScript object into a DataTables JSON structure: A practical guide

I have integrated the datatables jQuery plugin into my project and I am looking to streamline the process by creating a shared function to easily call a datatable from multiple pages without duplicating code. To achieve this, I am attempting to define the ...

javascriptjqueryjsondatatables

"Selecting elements with CSS using the 'element'

While exploring some websites for studying purposes, I came across this code snippet. .site-header .widget-area span.but As a beginner in CSS, I'm curious to know more about the span.but part. Is it similar to the :not pseudo selector? ...

csscss-selectors

Position the image in the exact center both vertically and horizontally

I am trying to center a list of images both vertically and horizontally within their respective li. I want to achieve this using jQuery. How can I align the images in the center of each li element both horizontally and vertically? You can view a demo at c ...

jqueryhtmlcss

Minimal - Combining a module with a parent component

To provide some background, I am utilizing bootstrap nav pills as triggers for bootstrap collapsibles. This is a simplified representation of the LESS code for bootstraps nav pills: .nav-pills { > li { // Active state &.active > a ...

htmlcsstwitter-bootstrapless

Can the hasClass() function be applied to querySelectorAll() in JavaScript?

As a beginner in javascript and jquery, I recently attempted to manipulate classes using the following code snippet: if ($(".head").hasClass("collapsed")) { $(".fas").addClass("fa-chevron-down"); $(".fas&qu ...

javascriptjquery

Using SVG graphics as data labels in a HighChart stacked column chart

I am attempting to generate a stacked column chart in Highcharts with SVG images as x-axis labels, similar to the image displayed here: https://i.stack.imgur.com/y5gL1.png I have managed to achieve this with individual data points per label (non-stacked ...

javascripthighcharts

Using jQuery to smoothly scroll to a specific class name

I am faced with an HTML code snippet that looks like this: <div data-stored="storenow" data-save="save" class="saveIcon" data-unique="game">Save</div> My intention is to use jQuery to scroll to the game number 456 as shown below. var contain ...

javascriptjqueryhtmlcss

Implementing Bootstrap 3 mobile design by necessity

My Wordpress site uses a Bootstrap 3 layout where the loop displays posts using 2 different templates. Type 1 <div class="row"> <div class="col-md-4"> <h1>title</h1> <h3>sub</h3> </div> ...

jqueryhtmlcsswordpresstwitter-bootstrap

React is unable to identify the `initialValue` attribute on a DOM element

Warning: React is not able to recognize the `initialValue` property on a DOM element. If you intended for it to show up in the DOM as a custom attribute, use `initialvalue` in lowercase instead. If it was mistakenly passed from a parent component, make sur ...

javascriptnode.jsreactjsredux-form

Determining the client web app version in HTTP requests

We frequently update our single page application, but sometimes an older version with a bug can still be in use. It would be helpful if the client could include a version identifier with requests to let us know which code base is being used. Are there est ...

javascriptajaxhttpweb-applicationssingle-page-application

Error Occurred while Uploading Images using Ajax HTML Editor with JSON Data

I am facing an issue with my AJAX HtmlEditorExtender, specifically when trying to upload an image. The error message I receive is as follows: JavaScript runtime error: Sys.ArgumentException: Cannot de-serialize. The data does not correspond to valid JSON. ...

c#javascriptajaxjson

Is it possible to generate excel spreadsheets using a selection in Laravel?

In my system, I have implemented a radio group as a filter for my table which displays items as active, inactive, or both. Additionally, there is a button that allows users to export the table data into an Excel document. Currently, the export button downl ...

phphtmllaravellaravel-8

The Express application encounters a 500 Internal Server Error due to a TypeError where the Object #<EventEmitter> does not contain the method 'hr

The staging instance of my webapp is encountering an issue: Express 500 TypeError: Object #<EventEmitter> has no method 'hrtime' at Object.logger [as handle] (F:\approot\node_modules\express\node_modules\connect ...

javascriptnode.jsexpress

What could be the reason for Angular showing the raw HTML code instead of

I'm currently diving into Angular and encountering an issue where my HTML isn't properly displaying the values I've set. It appears to only show the raw HTML. Here's a snippet from my HTML page: <p>to-do-items works!</p> < ...

javascriptangular

Is your Node.js asynchronous parallel function not performing as expected?

I have a series of promises that I need to execute sequentially, but it's getting messy with all the promise returns. To simplify this process, I decided to use the async library and tried out the parallel method. However, instead of running one after ...

javascriptnode.jsasynchronouspromise

Using Regular Expressions in an ExpressJS Router

When working with ExpressJS, is there a way to combine the following routes into one using RegEx? app.get(/^\/blog(?:\/p(\/\d+)?)?$/, blog.list); ...

javascriptregexnode.jsexpress

Flexbox - managing wrapping on legacy devices

Utilizing flexbox, I have successfully designed a 2 column layout with a div at the top spanning both columns for a menu format. While this works flawlessly in Chrome and iOS7, it appears to be ineffective in outdated versions of Safari. In this fiddle, yo ...

htmlcssflexbox

Remove duplicate JSON records in JavaScript by comparing and filtering based on identical attributes

Looking to remove duplicates from a JSON object [{id:1,name:a, cat:1},{id:1, name:a, cat:2},{id:2, name:b, cat:8}] I want to keep only the first occurrence of each duplicated id [{id:1,name:a, cat:1},{id:2, name:b, cat:8}] ...

javascriptjson

The appearance of my HTML website varies significantly across different devices used by viewers

It's frustrating to see that my HTML website appears differently on various devices. While it looks perfect on mine, my friend is facing issues such as containers being out of place and images not loading properly. I really need to figure this out as ...

htmlcssbootstrap-4

What are some ways I can safeguard my CSS from injected elements?

I have created an HTML widget that is inserted into various websites without the use of iframes. However, I am encountering issues where the CSS of some sites is affecting the appearance of my elements, such as text alignment, underlining, and spacing. Is ...

javascripthtmlcss