• Sign in to Neowin Faster!

    Create an account on Neowin to contribute and support the site.

  • 0
Sign in to follow this  

Javascript multiple columns question

Question

M_Lyons10    454

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!

 

Share this post


Link to post
Share on other sites

4 answers to this question

Recommended Posts

  • 0
Seahorsepip    610

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

Share this post


Link to post
Share on other sites
  • 0
M_Lyons10    454
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!

Share this post


Link to post
Share on other sites
  • 0
jimbobs    28

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

Share this post


Link to post
Share on other sites
  • 0
M_Lyons10    454
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.

Share this post


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
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.