• 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
This topic is now closed to further replies.
  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By News Staff
      Jumpstart your career with this Pay What You Want JavaScript Certification Bundle
      by Steven Parker



      Today's highlighted offer comes via our Online Courses section of the Neowin Deals store, where you can Pay What You Want for the 2021 Learn to Code JavaScript Certification Bundle. Jumpstart your lucrative career in coding and programming with 50 hours of content on HTML5, Javascript coding, DOM games and more.

      Unlock the following courses with a bid over the average price:

      HTML5 Canvas: Create 5 Games & 5 Projects
      Amazing Effects with JavaScript on the HTML Canvas Element

      JavaScript: Create 5 Fun Word Games
      Build 5 Amazing Interactive Games Perfect for Kids Using JavaScript

      JavaScript Math Games Project: Learn Code from Scratch
      Explore How You Can Create a Fully Dynamic Interactive Math Game

      JavaScript: DOM Modern Interactive Dynamic Web Pages & Games
      Create Interactive & Dynamic Web Page Content with JavaScript DOM Manipulation

      JavaScript: DOM Projects InterActive Dynamic WebPages JS DOM
      Make Web Pages Interactive & Dynamic by Updating Elements, Adding Listeners and Creating JS DOM Games

      Create 5 HTML Games Using JavaScript Course
      Introduction to Drawing Using JavaScript on HTML5 Canvas Element

      JavaScript DOM Pacman Game Project: Learn JavaScript Code
      Create a JavaScript Pacman Game from Scratch Using Document Object Model DOM Game Source Code

      Create 5 JavaScript Coding Projects from Scratch Course
      Learn More about JavaScript & DOM Interactions and Create Useful Components

      or Pay What You Want for the unlocked course:

      JavaScript for Beginners: The Complete introduction to JS
      Learn the Basics of JavaScript & Create Various Programs and Applications

      Here's the deal:
      The bundle represents an overall retail value of $1,791. Bid the average price or over and you'll take home the entire bundle. Beat the Leader's price and get entered into the epic giveaway! Pay What You Want for the 2021 Learn to Code JavaScript Certification Bundle

      Not for you?
      That's OK, there are other deals on offer you can check out here.

      Enter giveaways: Polycade Home Arcade | $5K in cash | $10K in Crypto Ivacy VPN - 5 year subscription for just $1 per month NordVPN - 2 year subscription at up to 68% off Private Internet Access VPN - subscriptions at up to 71% off Unlocator VPN or SmartDNS - unblock Geoblock with 7-day free trial Neowin Store for our preferred partners. Subscribe to Neowin - for $14 a year, or $28 a year for Ad-Free experience 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
      Pay What You Want for this Java Master Class Bundle
      by Steven Parker

      Today's highlighted deal comes via our Online Courses section of the Neowin Deals store, where for only a limited time you can Pay What You Want for this Java Master Class Bundle. Kickstart your coding career with 50+ hours of training in the world's most popular programming language.



      With the Pay What You Want bundles, you can get something incredible for as little as you want to pay. And if you beat the average price, you’ll receive the fully upgraded bundle! Included in this Pay What You Want deal, are the following courses:

      Pay What You Want (as little as $1) for the unlocked item:

      Java Game Development: Create a Flappy Bird Clone
      Use the World's Most Popular Programming Language to Create Your First Game

      Or beat the average price to also get the following items:

      Oracle Java SE 8 Certification Course
      Get Your Java Skills Online in This 14-Hour Primer

      Java Web Services and XML: ORACLE Exam Preparation
      Enhance Your Java Toolkit with an Introduction to XML

      JavaFX: Building Client Applications
      Walk Through Building Your First JavaFX App in 3 Hours

      Mastering Java Swing & GUI Applications
      Learn How to Write GUI Applications in Java

      Java Web Technologies Course
      Get Java-Savvy & Prep for an Oracle Certification Exam

      Professional Web Scraping with Java
      Collect Mounds of Valuable Data by Web Scraping

      Java Hibernate Object/Relational Mapping (ORM) Course
      Come to Grips with Java's Hibernate Tool

      Java Spring MVC Quickstart Course
      Create Web Apps Using the Java Spring Framework

      Learn Java From Scratch
      Go From Beginner to Expert in the Web's Most Popular Language - Over 9 Hours of Training

      What's the benefit?
      The bundle represents an overall retail value of $960 But you can Pay What You Want for the unlocked course (as little as $1) Beat the average price and you'll take home the entire bundle. Beat the Leader's price and get entered into the epic giveaway. Pay What You Want for this Java Master Class Bundle
      See other Pay What You Want deals This is a time-limited deal that ends soon.
      Get $1 credit for every $25 spent · Give $10, Get $10 · 10% off for first-time buyers.

      Not for you?
      That's OK, there are other deals on offer you can check out here.



      Enter giveaways: Polycade Home Arcade | $5K in cash | $10K in Crypto Ivacy VPN - 5 year subscription for just $1 per month NordVPN - 2 year subscription at up to 68% off Private Internet Access VPN - subscriptions at up to 71% off Unlocator VPN or SmartDNS - unblock Geoblock with 7-day free trial Neowin Store for our preferred partners. 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
      Pay What You Want for this Complete Learn to Code Certification Bundle
      by Steven Parker

      Today's highlighted offer comes via our Online Courses section of the Neowin Deals store, where you can Pay What You Want for the Complete Learn to Code Certification Bundle. A price you pick gets you 156 hours of premium coding instruction, from Python to Ruby and everything in between.



      With the Pay What You Want bundles, you can get something incredible for as little as you want to pay. And if you beat the average price, you’ll receive the fully upgraded bundle! Included in this Pay What You Want deal, are the following courses:

      Pay What You Want (as little as $1) for the unlocked course:

      JavaScript Programming Complete
      Work Towards a Lucrative Career in Web Development by Building Real-World JavaScript Projects Or beat the the average price to get these as well:

      Learn How To Code: Google's Go Programming Language
      Go is an open source programming language developed by Google that makes it easy to build simple, reliable, and efficient software. The Complete Python Course: Beginner to Advanced!
      Get the Complete A to Z Story on Python & Start Building Advanced Programs Fast

      Learn By Example: Scala
      Master This Highly Scalable General-Purpose Language with 65 Examples

      Projects in Programming Languages: Ruby, Python, Java
      Learn 3 of the Most Financially Viable Programming Languages by Solving Real-World Problems

      Learn Angular 2 from Beginner to Advanced
      Use the Newest Version of this Powerful Google Framework to Build Complex Apps

      How to Make a Freaking iPhone App: iOS 10 and Swift 3
      Nail Down the Development Fundamentals of the Hottest New OS

      The Complete Web Developer Masterclass: Beginner To Advanced
      Become an Employable Web Developer by Learning HTML, JavaScript, Angular, NodeJS, & Much More

      Git Complete Mastery & GitHub: 100% Hands-on Git Guide
      Develop a Rock Solid Foundation in Git & Start Building Programs More Efficiently

      Professional Rails Code Along
      Develop a Real World Rails Project Through a Step-by-Step Process

      Good to know:
      The bundle represents an overall retail value of $1,573 But you can Pay What You Want for the two unlocked courses (as little as $1) Beat the average price and you'll take home the entire bundle. Beat the Leader's price and get entered into the epic giveaway. Pay What You Want for the Complete Learn to Code Certification Bundle
      See other Pay What You Want deals. This is a time limited deal.
      Get $1 credit for every $25 spent · Give $10, Get $10 · 10% off for first-time buyers.

      Not for you?
      That's OK, there are other deals on offer you can check out here.



      Giveaways: Home Arcade Polycade | Complete Home Gym | $10K in Crypto currency Ivacy VPN - 5 year subscription for just $1 per month NordVPN - 2 year subscription at up to 68% off Private Internet Access VPN - subscriptions at up to 71% off Unlocator VPN or SmartDNS - unblock Geoblock with 7-day free trial Neowin Store for our preferred partners. 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
      Pay What You Want for this Java Master Class Bundle
      by Steven Parker

      Today's highlighted deal comes via our Online Courses section of the Neowin Deals store, where for only a limited time you can Pay What You Want for this Java Master Class Bundle. Kickstart your coding career with 50+ hours of training in the world's most popular programming language.



      How does it work?
      With the Pay What You Want bundles, you can get something incredible for as little as you want to pay. And if you beat the average price, you’ll receive the fully upgraded bundle! Included in this Pay What You Want deal, are the following courses:

      Pay What You Want (as little as $1) for the unlocked item:

      Java Game Development: Create a Flappy Bird Clone
      Use the World's Most Popular Programming Language to Create Your First Game

      Or beat the average price to also get the following items:

      Oracle Java SE 8 Certification Course
      Get Your Java Skills Online in This 14-Hour Primer

      Java Web Services and XML: ORACLE Exam Preparation
      Enhance Your Java Toolkit with an Introduction to XML

      JavaFX: Building Client Applications
      Walk Through Building Your First JavaFX App in 3 Hours

      Mastering Java Swing & GUI Applications
      Learn How to Write GUI Applications in Java

      Java Web Technologies Course
      Get Java-Savvy & Prep for an Oracle Certification Exam

      Professional Web Scraping with Java
      Collect Mounds of Valuable Data by Web Scraping

      Java Hibernate Object/Relational Mapping (ORM) Course
      Come to Grips with Java's Hibernate Tool

      Java Spring MVC Quickstart Course
      Create Web Apps Using the Java Spring Framework

      Learn Java From Scratch
      Go From Beginner to Expert in the Web's Most Popular Language - Over 9 Hours of Training

      Here's the deal:
      The bundle represents an overall retail value of $960 But you can Pay What You Want for the unlocked course (as little as $1) Beat the average price and you'll take home the entire bundle. Beat the Leader's price and get entered into the epic giveaway. Pay What You Want for this Java Master Class Bundle
      See other Pay What You Want deals This is a time-limited deal.
      Get $1 credit for every $25 spent · Give $10, Get $10 · 10% off for first-time buyers.

      Not for you?
      That's OK, there are other deals on offer you can check out here.



      Giveaways: Home Arcade Polycade | Complete Home Gym | $10K in Crypto currency Ivacy VPN - 5 year subscription for just $1 per month NordVPN - 2 year subscription at up to 68% off Private Internet Access VPN - subscriptions at up to 71% off Unlocator VPN or SmartDNS - unblock Geoblock with 7-day free trial Neowin Store for our preferred partners. 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
      Pay What You Want for this Learn to Web Design Bundle
      by Steven Parker

      Today's highlighted offer comes via our Online Courses section of the Neowin Deals store, where for only a limited time you can Pay What You Want for the Learn to Web Design Bundle. Break into the lucrative world of professional web design with up to 75 hours of content.



      With the Pay What You Want bundles, you can get something incredible for as little as you want to pay. And if you beat the average price, you’ll receive the fully upgraded bundle! Included in this Pay What You Want deal, are the following courses:

      Pay What You Want (as little as $1) for the unlocked course:

      Design a Website From Scratch: HTML, CSS, Responsive Design
      Create Responsive Websites Using the Foundational Blocks of Web Design

      and unlock the following courses with a minimum of the average price:

      Learn Photoshop, Web Design & Profitable Freelancing 2017
      Discover the Photoshop Workflow & Establish a Lucrative Freelancing Career

      Adobe Photoshop CC: Your Complete Beginner's Guide
      The World's Most Popular Photo Editing Software Taught to You From A to Z

      Responsive Web Design: Made Easy
      Learn the Basics of HTML5 & CSS3 & Start Designing Dynamic Websites

      The Complete Bootstrap Masterclass Course: Build 4 Projects
      Discover the Scalability of Bootstrap by Building 4 Real, Responsive Projects

      jQuery UI Ultimate: Design Amazing Interfaces Using jQuery UI
      Implement A Wide Range of Interactivity Into Websites & Make Your Resume Stand Out

      UI Design in Photoshop: Start Designing Web & Mobile Apps
      Optimize Adobe Photoshop for Web & Mobile Design

      Building Websites: Learn Bootstrap for Rapid Web Development
      Enhance Your Development Workflow by Learning this Efficient Scaling Framework

      Web Design: Make a Single Page Website Carousel Controls
      Build a Completely Dynamic Webpage as the First Step Towards Web Design Mastery

      What's the benefit?
      The bundle represents an overall retail value of $1,048. But you can Pay What You Want for the unlocked courses (as little as $1). Beat the average price and you'll take home the entire bundle. Beat the Leader's price and get entered into the epic giveaway. Pay What You Want for the Learn to Web Design Bundle
      See other Pay What You Want deals. This is a time-limited deal that ends soon.
      Get $1 credit for every $25 spent · Give $10, Get $10 · 10% off for first-time buyers.

      Not for you?
      That's OK, there are other deals on offer you can check out here.



      Giveaways: Home Arcade Polycade | Complete Home Gym | $10K in Crypto currency Ivacy VPN - 5 year subscription for just $1 per month NordVPN - 2 year subscription at up to 68% off Private Internet Access VPN - subscriptions at up to 71% off Unlocator VPN or SmartDNS - unblock Geoblock with 7-day free trial Neowin Store for our preferred partners. 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.