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

JavaScript vs. GSP: Exploring How to Trigger a Grails Action

There is an action in a controller that I need to modify. def deleteFiling={ obj.removeFiling() redirect(action:"list") } This action is triggered from a GSP: <g:link action="deleteFiling" id="${filingInstance.id}"> <img src="${resource(di ...

javascriptgrailsextjsgsp

Retrieve the value of a variable in a Bootstrap modal using Jade

I am looking to accomplish the following: On my Jade page, I have a for-loop that generates a list of items. Each item has some information displayed through Jade variables and a delete button. When this delete button is clicked, I want a Bootstrap Modal ...

javascriptjquerytwitter-bootstrapexpresspug

Create a form button that triggers the execution of a Python function

Need help with calling a Python function with a form button Greetings, everyone! I am encountering an issue and would greatly appreciate any assistance. I have a webpage that contains a single button within a Python structure: <form action = "http://l ...

htmlpython-3.xflask

Creating an iPad-inspired password field experience in a text input with jquery: A step-by-step guide

Looking for a plugin that mimics the iPad's password field behavior for credit card number entry. The focus should only reveal the entered digit and then switch to a bullet as the next digit is typed. Additionally, all previously entered digits should ...

javascriptjqueryhtml

Challenges with browsing navigation in Selenium WebDriver

Recently, I began my journey of learning selenium WebDriver. In an attempt to automate the task of logging into an account using the Firefox browser, I encountered a discrepancy. Manually opening the browser and clicking on the login link from the homepag ...

javascriptjavaseleniumselenium-webdriverautomated-tests

Changing the z-index property of a Material-UI <Select> dropdown: What you need to know

Currently, I am implementing an <AppBar> with a significantly high z-index value (using withStyles, it is set to theme.zIndex.modal + 2 which results in 1202). The primary purpose behind this decision is to guarantee that my <Drawer> component ...

javascriptreactjsmaterial-ui

Does altering HX-GET in JavaScript have no impact on the outcome?

I need assistance with implementing HTMX in my FastAPI application that uses Tailwind and MongoDB for the database. Here is the form I am working with: <form id="currencyForm" hx-get="/currency_history_check/EUR" hx-target="#re ...

javascripthtmlfastapihtmx

Using HTML5 to Define the Size of a File Upload Button

The validation error from W3C states: "Attribute size is not permitted for the input element at this location." <input type="file" name="foo" size="40" /> How should the width of a file input be specified in HTML5? ...

csshtml

Choose certain table cells that do not have an identifier or any classes assigned to them

My table has 3 rows and 3 data cells. To select the first row, first data cell, and all bold tags from it: tr + td b {} To select the second row, second data cell, and all bold tags from it: tr+tr > td+td b {} I need help selecting them without usi ...

htmlcss

JavaScript's setAttribute function is not functioning as expected

I have been using the setAttribue method as shown below. It works perfectly for the first instance, but after that, when I try to change the value, it displays an alert without updating with document.getElementById("to").setAttribute("value", selValue); d ...

javascripthtml

How can I stop my browser from recalling text field data?

Similar Question: Is there a W3C compliant method to disable autocomplete in an HTML form? How can I stop a browser from remembering the text field's content? The issue arises when the field has a value like 100, followed by a currency symbol suc ...

htmlbrowser

I noticed that on my checkout sections, the toggle feature causes them to fold up and then immediately fold back down. This behavior should only happen

Is there a way to make my checkout sections fold up once instead of folding up and down when using toggle? I have created a test case in jsfiddle: (no styling done yet!) http://jsfiddle.net/Wd8Ty/ The code responsible for the behavior is located in AMLRW ...

javascriptjqueryhtmlcss

alignment of text output and label that responds to various screensizes

Here is some html code with a label and an output next to it. <div class="panel-body"> <div class="col-sm-6"> <label class="head6">Company Name : </label><span class="head9 halfR"> ...

htmlcsstwitter-bootstrapalignmentmultiple-columns

Issue with Dropdown Menu functionality while using multiple dropdown options

I am currently experimenting with dropdown menus from W3Schools and have encountered an issue when trying to implement two dropdown options. The code works fine for a single dropdown, but when I try to add a second one using GetElementsByClassName instead ...

javascripthtmlcsstwitter-bootstrap

What could be causing the API link to not update properly when using Angular binding within the ngOnInit method?

Hi there, I'm currently working on binding some data using onclick events. I am able to confirm that the data binding is functioning properly as I have included interpolation in the HTML to display the updated value. However, my challenge lies in upd ...

javascripthtmlangulartypescript

Begin your meteor project with a remote MongoDB server on a Windows operating system

Currently tackling a project that requires me to integrate my meteor project with a remote MongoDB server on Windows. I successfully set the environment variable (MONGO_URL="DB LINK") from OSX using terminal commands, but I'm encountering difficulties ...

javascriptnode.jsmongodbmeteor

Update image source dynamically using AJAX and jQuery

Within my app, there exists a web page that contains numerous images with dynamically generated source URLs obtained by sending get requests to the rails server. Initially, these images are assigned a default source. Upon loading the page, another request ...

javascriptjqueryruby-on-railsajax

Verify whether an item exists within a group of objects, and if so, eliminate it from the group; otherwise, include it in the group

I am working on a function to create an array of objects where only specific attributes are kept from the original object. The goal is to check if the selected object is already in the array - if it is, remove it; if not, add it. However, I'm facing ...

javascriptarraysreactjsjson

Tips for invoking the setState method via an onClick event the ES6 way

class BlogPost extends React.Component{ //getInitialState constructor(){ super(); this.onLike = this.onLike.bind(this); this.state = { like :0 } } onLike(){ this.setState({ li ...

javascriptreactjsecmascript-6

Page resizing is disabled in Chrome after an Ajax load

I've been tirelessly working on the CSS for a website I'm building, and I've encountered a strange issue that only seems to affect Chrome. Firefox and Internet Explorer work perfectly fine. I am using jQuery to load HTML stubs and a signifi ...

javascriptjquerycssajaxgoogle-chrome