- 0
Javascript multiple columns question
-
Recently Browsing 0 members
- No registered users viewing this page.
-
Similar Content
-
Microsoft introduces TypeScript 5.4: Explore the latest features and enhancements
By zikalify,
- microsoft
- typescript
- (and 4 more)
- 11 replies
- 4 views
-
JavaScript All-in-One For Dummies (worth $24) free in exchange for your email
By News Staff,
- ebook offer
- javascript
- (and 3 more)
- 0 replies
- 4 views
-
JavaScript from Frontend to Backend ($20.99 Value) FREE for your work email
By News Staff,
- ebook offer
- sponsored
- (and 3 more)
- 0 replies
- 3 views
-
Google to discontinue the Basic HTML version of Gmail next year
By Chasethebase,
- 1 reply
- 5 views
-
Firefox vs Chrome: Mozilla finally manages to trump Google on Windows in a decade old test 1 2
By hellowalkman,
- 33 replies
- 5 views
-
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 comment
Share on other sites
4 answers to this question
Recommended Posts