• 0

Javascript multiple columns question


Question

M_Lyons10

Good afternoon everyone!

I am NOT strong with javascript at all, and was trying to do something today and having no luck whatsoever.

 

I have drop down menus from the navigation on my site and one of them is getting too long (on desktop).  I wanted to, if the nav ul has more than 8 items in the list for it to show as two separate columns. 

 

Here is the javascript from the navigation now:

 

            $('#nav > ul').dropotron({
                offsetY: -16,
                mode: 'fade',
                noOpenerFade: true,
                hideDelay: 400
            });

 

I would assume that this would need to be done in the javascript since I attempted to edit the css and that did not work.  Just for clarity, here is the CSS:

 

  #nav {
    position: absolute;
    right: 2.5em;
    top: 0; }
    #nav ul li {
      float: left;
      margin-left: 1.5em;
      height: 7em;
      line-height: 7em; }
      #nav ul li a {
        color: #fff;
        -moz-transition: background-color .25s ease-in-out;
        -webkit-transition: background-color .25s ease-in-out;
        -ms-transition: background-color .25s ease-in-out;
        transition: background-color .25s ease-in-out;
        color: #ccc;
        text-decoration: none;
        text-transform: uppercase;
        font-weight: 700;
        padding: 0.55em 1.4em 0.55em 1.4em;
        border-radius: 6px;
        outline: 0; }
        #nav ul li a:hover {
          color: #fff; }
      #nav ul li.current_page_item a, #nav ul li.active a {
        background: #20242A;
        color: #fff; }
    #nav > ul > li > ul {
      display: none; }

 

I'm open to suggestions as well.  I'm just trying to have the menu be a little easier to navigate.

 

Thank you for your help!

 

Link to post
Share on other sites

4 answers to this question

Recommended Posts

  • 0
Seahorsepip

Is a link to the site in question possible so were can see the problem?

Link to post
Share on other sites
  • 0
M_Lyons10
On 8/7/2019 at 6:57 PM, Seahorsepip said:

Is a link to the site in question possible so were can see the problem?

Sure, absolutely!

 

Website

 

I also looked into doing this through CSS, but have not had any luck with that either.

 

Thank you for your help!

Link to post
Share on other sites
  • 0
jimbobs

Off topic, but why do you have the page title flash "1 new message"?

Link to post
Share on other sites
  • 0
M_Lyons10
4 hours ago, jimbobs said:

Off topic, but why do you have the page title flash "1 new message"?

That's just the auto-prompt from the chat.  I didn't realize it was setting the page title actually.  I'm going to look into changing that for sure...

Thank you for pointing that out.

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By News Staff
      Save 97% off this Complete One-Hour Coder Bundle - now just $34.99
      by Steven Parker

      Today's highlighted deal comes via our Online Courses section of the Neowin Deals store, where you can save 97% off this Complete One-Hour Coder Bundle. Train your inner programmer with 6 one-hour courses on C++, CSS, HTML, JavaScript, and Python.



      This bundle consists of the following courses:

      C++ Foundations
      Begin Your Coding Journey with the High-End, Popular C++ Language for Software & Game Development CSS Foundations
      Enhance Website Aesthetics & Designs with the Style Sheet Language CSS HTML Foundations
      Start Creating Your Own Websites, Web Apps, & More Java Foundations
      Master the General Purpose & Object-Oriented Language of Java for Mobile Development JavaScript Foundations
      Learn JavaScript for Web & HTML5 Game Development Python Foundations
      Learn the Foundations of Python for Data Science & Machine Learning Good to know
      Updates included Certification of completion included Length of time users can access this course: lifetime Redemption deadline: redeem your code within 30 days of purchase For specifications, license and instructor info please click here.

      Here's the deal:
      This Complete One-Hour Coder Bundle normally costs* $1,200, but it can be yours for just $34.99 for a limited time, that's a saving of $1,165.01 (97%) off.

      >> Get this deal, or learn more about it here <<
      See all Online Courses on offer. This is a time-limited offer that ends soon.
      Get $1 credit for every $25 spent · Give $10, Get $10 · 10% off for first-time buyers.

      Not for you?
      If this offer doesn't interest you, why not check out the following offers:



      The Win Your Dream 2020 Tesla Model 3 Giveaway 20% off Ivacy VPN subscription with coupon code IVACY20 NordVPN subscription at up to 68% off for a 2 year plan Private Internet Access VPN subscription at up to 71% off Unlocator VPN or SmartDNS unblock Geoblock with 7-day free trial Subscribe to Neowin for $14 a year, or $28 a year for Ad-Free experience Disable Sponsored posts · Neowin Deals · Free eBooks · Neowin Store

      Disclosure: This is a StackCommerce deal or giveaway in partnership with Neowin; an account at StackCommerce is required to participate in any deals or giveaways. For a full description of StackCommerce's privacy guidelines, go here. Neowin benefits from shared revenue of each sale made through our branded deals site, and it all goes toward the running costs.

    • By News Staff
      Get this Interactive Learn to Code Bundle at 73% off for just $29.99
      by Steven Parker

      Today's highlighted deal comes via our Online Courses section of the Neowin Deals store, where you can save 73% off the Interactive Learn to Code Bundle. Start writing codes and programs from scratch with 9 interactive courses on SQL, JavaScript, PHP, jQuery, BootStrap, and more.



      This deal consists of the following courses:

      An Interactive SQL Tutorial for Beginners: Introduction to SQL
      Getting Started with SQL Doesn't Have to Be Hard An Interactive JavaScript Course for Beginners
      Learn JavaScript Interactively with a One-of-a-Kind JS Online Course Interactive jQuery Tutorial: Learn jQuery Step-by-Step
      Take an Interactive jQuery Training Course for Beginners to Quickly Master jQuery Events, Effects & More Learn PHP Online: PHP Basics Explained in an Interactive & Fun Manner
      An Interactive Tutorial for Beginners Who Want to Master PHP Basics in a Non-Boring Way The Complete Solidity Smart Contract Guide
      Master Solidity Programming Through Hands-On Experience Master Python Fundamentals the Fun Way: An Interactive Python Tutorial
      A Python Training Course for Absolute Beginners Who Wants to Master the Language Without Getting Bored A Responsive Web Design Course: Find Out How to Create a Responsive Website
      Make a Website Mobile-Friendly with a Step by Step, Responsive Web Design Tutorial Bootstrap Tutorial: Learn to Create Dynamic Websites in a Pinch
      Find Out How to Use Bootstrap the Fun Way by Using an Interactive Course An Interactive Java Tutorial: Learn by Practice!
      Learn Java From Scratch by Combining Theory with Hands-On Coding Experience Good to know
      Length of time users can access this course: lifetime Certification of completion included Redemption deadline: redeem your code within 30 days of purchase For a full description, specs, and instructor info, click here.

      Here's the deal:
      This Interactive Learn to Code Bundle normally costs* $112, but you can pick it up for just $29.99 for a limited time - that represents a saving of $82.01 (73%) off.

      >> Get this deal, or learn more about it <<
      See all discounted Online Courses. This is a time-limited offer.


      Get $1 credit for every $25 spent · Give $10, Get $10 · 10% off for first-time buyers.

      Not for you?
      If this offer doesn't interest you, why not check out the following offers:

      The Win Your Dream 2020 Tesla Model 3 Giveaway
      The Nintendo Gaming Bundle Giveaway 20% off Ivacy VPN subscription with coupon code IVACY20 NordVPN subscription at up to 68% off for a 2 year plan Private Internet Access VPN subscription at up to 71% off Unlocator VPN or SmartDNS unblock Geoblock with 7-day free trial Disable Sponsored posts · Other recent deals · Preferred partner software

      Disclosure: This is a StackCommerce deal or giveaway in partnership with Neowin; an account at StackCommerce is required to participate in any deals or giveaways. For a full description of StackCommerce's privacy guidelines, go here. Neowin benefits from shared revenue of each sale made through our branded deals site, and it all goes toward the running costs.

      running costs.

    • By News Staff
      Free eBook: Your First Week With Node.js
      by Steven Parker

      Claim your complimentary copy for free, before the offer expires.



      What's it about?


      A beginner's introduction to Node and its related technologies.

      Used by some of the biggest companies today, Node is blazingly fast. Taking JavaScript, a ubiquitous language among developers, we'll get you up and running with guides on when to use Node, NPM, Security, as well as connecting with MySQL, MongoDB and more.

      How to get it
      Please ensure you read the terms and conditions to claim this offer. Complete and verifiable information is required in order to receive this free offer. If you have previously made use of these free offers, you will not need to re-register. While supplies last!

      >> Your First Week With Node.js - free eBook <<
      Offered by SitePoint, view their other free resources. Limited time offer.

      Not for you?
      That's OK, there are other free eBooks on offer you can check out here, but be aware that these are all time-limited offers. If you are uncomfortable sharing your details with a third-party sponsor, we understand. Or via our preferred partner:

      How can I disable these posts? Click here.

      Disclosure: A valid email address is required to fulfill your request. Complete and verifiable information is required in order to receive this offer. By submitting a request, your information is subject to TradePub.com's Privacy Policy.

    • By News Staff
      Build Your First Node App - free eBook
      by Steven Parker

      Claim your complimentary copy for free, before the offer expires.



      What's it about?


      Bring to life your own Node app.

      A practical walkthrough of building an app server side with JavaScript (Node.js). Starting with Node.js use cases, then defining routes, synchronising the database and finally serving files.

      How to get it
      Please ensure you read the terms and conditions to claim this offer. Complete and verifiable information is required in order to receive this free offer. If you have previously made use of these free offers, you will not need to re-register. While supplies last!

      >> Build Your First Node App - free eBook <<
      Offered by SitePoint, view their other free resources. Limited time offer.

      Not for you?
      That's OK, there are other free eBooks on offer you can check out here, but be aware that these are all time-limited offers. If you are uncomfortable sharing your details with a third-party sponsor, we understand. Or via our preferred partner:

      How can I disable these posts? Click here.

      Disclosure: A valid email address is required to fulfill your request. Complete and verifiable information is required in order to receive this offer. By submitting a request, your information is subject to TradePub.com's Privacy Policy.

    • By News Staff
      Save 73% off the Interactive Learn to Code Bundle - now just $29.99
      by Steven Parker

      Today's highlighted deal comes via our Online Courses section of the Neowin Deals store, where you can save 73% off the Interactive Learn to Code Bundle. Start writing codes and programs from scratch with 9 interactive courses on SQL, JavaScript, PHP, jQuery, BootStrap, and more.



      This deal consists of the following courses:

      An Interactive SQL Tutorial for Beginners: Introduction to SQL
      Getting Started with SQL Doesn't Have to Be Hard An Interactive JavaScript Course for Beginners
      Learn JavaScript Interactively with a One-of-a-Kind JS Online Course Interactive jQuery Tutorial: Learn jQuery Step-by-Step
      Take an Interactive jQuery Training Course for Beginners to Quickly Master jQuery Events, Effects & More Learn PHP Online: PHP Basics Explained in an Interactive & Fun Manner
      An Interactive Tutorial for Beginners Who Want to Master PHP Basics in a Non-Boring Way The Complete Solidity Smart Contract Guide
      Master Solidity Programming Through Hands-On Experience Master Python Fundamentals the Fun Way: An Interactive Python Tutorial
      A Python Training Course for Absolute Beginners Who Wants to Master the Language Without Getting Bored A Responsive Web Design Course: Find Out How to Create a Responsive Website
      Make a Website Mobile-Friendly with a Step by Step, Responsive Web Design Tutorial Bootstrap Tutorial: Learn to Create Dynamic Websites in a Pinch
      Find Out How to Use Bootstrap the Fun Way by Using an Interactive Course An Interactive Java Tutorial: Learn by Practice!
      Learn Java From Scratch by Combining Theory with Hands-On Coding Experience Good to know
      Length of time users can access this course: lifetime Certification of completion included Redemption deadline: redeem your code within 30 days of purchase For a full description, specs, and instructor info, click here.

      Here's the deal:
      This Interactive Learn to Code Bundle normally costs* $112, but you can pick it up for just $29.99 for a limited time - that represents a saving of $82.01 (73%) off.

      >> Get this deal, or learn more about it <<
      See all discounted Online Courses. This is a time-limited offer.
      Get $1 credit for every $25 spent · Give $10, Get $10 · 10% off for first-time buyers.

      Not for you?
      If this offer doesn't interest you, why not check out the following offers:

      The Nintendo Gaming Bundle Giveaway 20% off Ivacy VPN subscription with coupon code IVACY20 NordVPN subscription at up to 68% off for a 2 year plan Private Internet Access VPN subscription at up to 71% off Unlocator VPN or SmartDNS unblock Geoblock with 7-day free trial Disable Sponsored posts · Other recent deals · Preferred partner software

      Disclosure: This is a StackCommerce deal or giveaway in partnership with Neowin; an account at StackCommerce is required to participate in any deals or giveaways. For a full description of StackCommerce's privacy guidelines, go here. Neowin benefits from shared revenue of each sale made through our branded deals site, and it all goes toward the running costs.