circlecube

Better jquery mega-menu tutorial

Evan Mullins — Wed, 14 Jul 2010 17:30:03 +0000

My earlier simple mega menu implementation post displayed some simple css and jquery to explode a standard navigation menu into a mega-menu… I’ve made it even better. My biggest issue with that implementation was that it did not keep the order like you’d expect. It read left to right in columns rather than down each column. In the example you can see the first column of three would read from the top: a, d, g, j… this could potentially be confusing. So I wanted to update it to keep the order better and just stack the columns of elements rather than the elements themselves.

I used some different jquery to execute this. First we walk through the menu elements and calculate which column they should be in. We basically map that element’s (li)index to the column it should be, some big math. Luckily I had some experience from actionscript in my arsenal doing just that, so porting the function to javascript I was ready to go. If your number X falls between A and B, and you would like to convert it to Y which falls between C and D follow this formula: Y = (X-A)/(B-A) * (D-C) + C. Plugging this function in and cancelling out the zeros and adding some rounding to get integers I got: Math.floor((liindex / $total * $cols)+1). Using this I added a class to each ‘li’ designating which column it should be in, and then used wrapAll to wrap them into column divs. Very simple and a much better implementation overall anyways. Better code, better user experience… what more can you ask… so here’s the example and jquery code. I’m thinking I should make this into a jquery plugin or something, any thoughts?

See the mega menu in action

Javascript code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

jQuery(document).ready(function() {
//clean up the row of the mega menu. add css class to each element on bottom row.
//only if more than 7 elements. if more than 16, mm-3
jQuery('#nav li ul').each(function(ulindex, ulele){
$total = jQuery(this).children('li').size();
if ($total <= 7) {
jQuery(this).addClass('mm-1');
}
else {
$cols = Math.floor(($total) / 8) + 1;
$remainder = $total % $cols;
$rows = Math.ceil($total / $cols);
jQuery(this).addClass('mm-' + $cols + ' total-' + $total + ' rem-'+$remainder );

jQuery(this).children().each(function(liindex, liele){
//alert("total: "+$total+", remainder: "+ $mod+", ulindex: "+ulindex+", liindex: "+liindex);
//If your number X falls between A and B, and you would like to convert it to Y which falls between C and D follow this formula: Y = (X-A)/(B-A) * (D-C) + C.
jQuery(this).addClass('col-' + Math.floor((liindex / $total * $cols)+1) );
if( (liindex+1) % $rows == 0) {
jQuery(this).addClass('last');
}
});

for (var colcount = 1; colcount<= $cols; colcount++){
jQuery(this).children('.col-'+colcount).wrapAll('

');
}
}
});
});

css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

ul { list-style:none; }

/********** < Navigation */
.nav-container { float:left; background: #398301; margin: 10em 0; width: 960px; }
#nav { border: 0px none; padding:3px 0 2px 44px; margin:0; font-size:13px; }

/* All Levels */
#nav li { text-align:left; position:relative; }
#nav li.over { z-index:999; }
#nav li.parent {}
#nav li a { display:block; text-decoration:none; }
#nav li a:hover { text-decoration:none; }
#nav li a span { display:block; white-space:nowrap; cursor:pointer; }
#nav li ul a span { white-space:normal; }

/* 1st Level */
#nav li { float:left; }
#nav li a { float:left; padding:5px 10px; font-weight:normal; color: #fff; text-shadow: 1px 1px #1b3f00; }
#nav li a:hover { color: #fff; text-shadow: 1px 1px 3px #ccc; }
#nav li.over a,
#nav li.active a { color:#fff; }

/* 2nd Level */
#nav ul { position:absolute; width:15em; top:26px; left:-10000px; border:1px solid #1b3f00; border-width: 0 1px 2px 1px; background:#398301; padding: 6px 0 6px; }
#nav ul div.col { float:left; width: 15em; }
#nav ul li { float:left; padding: 0; width: 15em; }
#nav ul li a { float:none; padding:6px 9px; font-weight:normal; color:#FFF !important; text-shadow: 1px 1px #1b3f00; border-bottom:1px solid #1b3f00; background:#398301; }
#nav ul li a:hover { color:#fff !important; text-shadow: 1px 1px 3px #ccc; background: #2b6301; }
#nav ul li.last > a { border-bottom:0; }
#nav ul li.last.parent > a { border-bottom:0; }

#nav ul li.over > a { font-weight:normal; color:#fff !important; background: #1b3f00; }
#nav ul.mm-1 { width: 15em; }
#nav ul.mm-2 { width: 30em; }
#nav ul.mm-3 { width: 45em; }
#nav ul.mm-4 { width: 60em; }
/* 3rd+ leven */
#nav ul ul { top:-6px; background: #1b3f00; }

/* Show Menu - uses built-in magento menu hovering */
#nav li.over > ul { left:0; }
#nav li.over > ul li.over > ul { left:14em; }
#nav li.over ul ul { left:-10000px; }

/* Show Menu - uses css only, not fully across all browsers but, for the purpose of the demo is fine by me */
#nav li:hover > ul { left:0; z-index: 100; }
#nav li:hover > ul li:hover > ul { left:14em; z-index: 200; }
#nav li:hover ul ul { left:-10000px; }

Download

Visit this demo page and view source or save as…

A simple mega menu implementation with CSS and jquery

Evan Mullins — Mon, 12 Jul 2010 18:26:23 +0000

I’ve been skinning quite a few ecommerce sites with the magento platform and wanted a simple way to explode the navigation menus. Some sites end up getting a long list of categories and sub-categories, so I wanted to do a mega-menu style navigation. One way to do it was to rewrite the html code for the navigation and pop each column into another nested unordered list. I’m not a fan of doing this because one – I didn’t want to manipulate the html. I like the simplicity of ul navigation with a clear flat list of li elements. Of course for nested sub-navigation any li can contain another ul. I wanted to just use some css and maybe javascript to visually accomplish the same thing. I also wanted it to be portable, so I could take it and use it on a wordpress install or even a plain html site. I went to my favorite: jquery. I knew there was a likely plugin out there already that would do something similar, but nothing after my initial search, but I realized that it was a simple procedure and mostly accomplished with some css.

I’ll walk you through the process here and let you inspect the code yourself and see it in action on the demo page. Assign each ul to be a default width of 15em, then each li element we float:left and also give it a width of 15em. This way we can change the ul width to 30em and automatically I have 2 columns! Assigning the nested ul a specific width according to it’s class is done through css, mm-0 will be 15em and incrementally each next one will be 15em more. mm-1 is 30 and mm-2 is 45. Then we use jquery to determine the number of elements in the list and assign it a class accordingly. This involves some math and some preferences. Using the magic ui number 7, I determined that a menu with more than 7 elements should explode into multiple columns. So anything less than or equal to 7 I assign the class ‘mm-1′ which in the css sets the width to the standard 15em (ie 1 mega menu column). More than 7 should pop into columns no more than 8 tall. So dividing the total by 8 will give us the number of columns we want. We’ll add a class of mm-x, where x would be the number of columns. And the li elements will float to the left and fill in the space in columns.
One specific issue is the last element in the menu, sometimes we need to style that element differently. I’ll loop through each child of the nested ul element and if it is on the bottom row apply a class of ‘last’. But this was a little tricky in calculating which would be last because were never sure how many elements there will be or how many columns. I just used the remainder after dividing the total by the number of columns, then if the remainder could be used to know which elements are on the bottom row.

OK, now that that’s out of the way, let’s look at the code.

HTML

This I won’t show, you can inspect the source of the demo if you wish to see it, it a basic nested collection of unordered lists. It’s the standard that is created by magento, wordpress and most other CMS platforms.

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

html, body { margin:0; padding:0; }
ul { list-style:none; }

/********** < Navigation */
.nav-container { float:left; background: #186C94; margin: 10em 0; width: 960px; }
#nav { border: 0px none; padding:3px 0 2px 44px; margin:0; font-size:13px; }

/* All Levels */
#nav li { text-align:left; position:relative; }
#nav li.over { z-index:999; }
#nav li.parent {}
#nav li a { display:block; text-decoration:none; }
#nav li a:hover { text-decoration:none; }
#nav li a span { display:block; white-space:nowrap; cursor:pointer; }
#nav li ul a span { white-space:normal; }

/* 1st Level */
#nav li { float:left; }
#nav li a { float:left; padding:5px 10px; font-weight:normal; color: #fff; text-shadow: 1px 1px #111; }
#nav li a:hover { color: #fff; text-shadow: 1px 1px 3px #ccc; }
#nav li.over a,
#nav li.active a { color:#fff; }

/* 2nd Level */
#nav ul { position:absolute; width:15em; top:26px; left:-10000px; border:1px solid #104A65; border-width: 0 1px 2px 1px; background:#186C94; padding: 6px 0 6px; }
#nav ul div.col { float:left; width: 15em; }
#nav ul li { float:left; padding: 0; width: 15em; }
#nav ul li a { float:none; padding:6px 9px; font-weight:normal; color:#FFF !important; text-shadow: 1px 1px #111; border-bottom:1px solid #104A65; background:#186C94; }
#nav ul li a:hover { color:#fff !important; text-shadow: 1px 1px 3px #ccc; background: #135575; }
#nav ul li.last > a { border-bottom:0; }
#nav ul li.last.parent > a { border-bottom:0; }

#nav ul li.over > a { font-weight:normal; color:#fff !important; background: #104A65; }
#nav ul.mm-1 { width: 15em; }
#nav ul.mm-2 { width: 30em; }
#nav ul.mm-3 { width: 45em; }
#nav ul.mm-4 { width: 60em; }
/* 3rd+ leven */
#nav ul ul { top:-6px; background: #104A65; }

/* Show Menu - uses built-in magento menu hovering */
#nav li.over > ul { left:0; }
#nav li.over > ul li.over > ul { left:14em; }
#nav li.over ul ul { left:-10000px; }

/* Show Menu - uses css only, not fully across all browsers but, for the purpose of the demo is fine by me */
#nav li:hover > ul { left:0; z-index: 100; }
#nav li:hover > ul li:hover > ul { left:14em; z-index: 200; }
#nav li:hover ul ul { left:-10000px; }

Javascript

Don’t forget to include jQuery (I prefer using the google hosted version at http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

jQuery(document).ready(function() {
//clean up the row of the mega menu. add css class to each element on bottom row.
//only if more than 7 elements. if more than 16, mm-3
jQuery('#nav li ul').each(function(ulindex, ulele){
$total = jQuery(this).children('li').size();
if ($total <= 7) {
jQuery(this).addClass('mm-1');
}
else {
$cols = Math.floor(($total) / 8) + 1;
$remainder = $total % $cols;
jQuery(this).addClass('mm-' + $cols + ' total-' + $total + ' rem-'+$remainder );

jQuery(this).children().each(function(liindex, liele){
//alert("total: "+$total+", remainder: "+ $mod+", ulindex: "+ulindex+", liindex: "+liindex);
if( liindex + $remainder >= $total || $remainder == 0 && liindex + $cols >= $total ){
//alert("total: "+$total+", remainder: "+ $remainder+", index: "+liindex);
jQuery(this).addClass('last');
}
});
}
});

});

See the demo in action

Why I {heart} Flash and a Smart Point for Adobe

Evan Mullins — Thu, 13 May 2010 15:04:41 +0000

Checking out an interesting article about Diaspora (back the project and the cause if you can) on NYTimes and then I noticed the words adobe and Apple in the same space. The ad reads “We Love Apple” and is followed by the Adobe logo. What a joke I thought, it takes a lot of gumption for Adobe to say they love Apple right now, but I’m sure they really do. Despite all the negative things Apple has been doing and saying towards Flash and Adobe in general. I admit I’m biased, but…

I {heart} flash

I would rather stop using Apple than stop using Adobe. I agree with the openness and empowering software that Adobe provides. True, it’s expensive and true it’s not perfect, but I’ve found Adobe to be a great company that cares about the web and progress. During the whole Flash/iPhone debate I’ve been bothered by the lack of response from Adobe. It was nice that they were above the name calling and flat out lying that Steve Jobs and Apple have turned to, but to be honest- a little disheartening that they had nothing to say. Then the ‘Thoughts on Flash’ came out and I was amazed at the silence from Adobe. This is the perfect and genius response to the unprofessional lashes from Apple. From the 3.3.1 iPhone developer clause to the sheer CLOSEDness of Apple in general. I used to be a big fan of Apple because they made a great product. Perhaps I gave them a little boost because who doesn’t like an underdog. But they have proven to me at least to be more closed and more evil than even Microsoft when they packaged IE with their OS. (Although Apple has done that too with Safari and iTunes, but I digress).

What we don’t love is anybody taking away your freedom to choose what you create, how you create it, and what you experience on the web.

I give props to Adobe. They were surely disturbed when Apple declared war on flash, but rather than stooping to the level of Steve Jobs, they thought it out and made an honorable move. I know it’s not the end, but if things continue a check-mate/game-point-match may be in order by the end of the decade…

Learn more at adobe. We love choice and the Truth about Flash.

Cornerstone Media Group | Atlanta Web Design

Evan Mullins — Tue, 20 Apr 2010 23:38:05 +0000

I’ve joined Cornerstone Media Group of Atlanta as the Senior Web Designer and Front-End coder! A bit stale as far as news goes, I’m going on 6 months already. The reason I bring it up now is that we’ve just relaunched our website. This new look is not just about new appearances and aesthetics, it is about a new approach. The redesigned website has new features that make the user experience easier and more intuitive. There is a dynamic portfolio and the company blog is tied more into the site and more into the business. Most employees are signed on as an author on the blog. We’ll do our best to flood the inter-web with good content related to what we do and our expertise. Three of our most popular business solutions now are highlighted buttons that can take you straight to landing pages with more in depth information on each solution; SEO, Web Design and E-Commerce. The redesigned website offers a freshness that comes with change. We hope you enjoy your new experience at cornerstone. If you’re in need of any web services chances are we’ll have a solution at CSMediaGroup.

Apple and Flash and HTML5 | Flash not dead

Evan Mullins — Thu, 25 Mar 2010 04:01:44 +0000

The main reason I decided to write this was foxtrot:

The “community” is bringing out so-called enemies of flash. But I think the web is what it is today to a great part because of flash. I hope apple will one day open up and actually make the best web experience possible by putting flash on the iProducts (but seriously doubt Mr Jobs will ever come to his senses). The way I see it, blocking flash on apple products is a business decision (as flash would compete with the cash flow of the app store) cloaked in a technical and sorry excuse and passing the blame onto the very company (Adobe) which has repeatedly tried to work with mac to achieve improvements.

HTML5 killing flash? Flash not dead!

I could write paragraphs about it, I for one am very excited about the new possibilities with html5 and css3 and even cs5! I could go on but I’ll just reference some of the best articles I’ve seen:
//links links links

CSS3 Tool, CSS3Please

Evan Mullins — Tue, 09 Mar 2010 18:43:20 +0000

With all the buzz about new improvements in CSS3 I’ve been meaning to write about it, but…

I couldn’t find any excuses when I stumbled on Paul Irish’s new css3please.com: a cross-browser css3 rule generator. Just had to do a quick post to spread the word.

It’s great for cross-browser testing as well as generating the code for many css3 rules:

border-radius
box-shadow
gradient background
rgba backgrounds
transform (rotate)
@font-face

and more coming soon!

Flashvars and as3

Evan Mullins — Sat, 12 Dec 2009 00:27:37 +0000

Flashvars and actionscript 3! Flashvar is a way that in your html embed codes (object tags) you can send variables and values into your swf file. These variables can then be grabbed internally and used your programming! Examples of these could be images that you want to use in your swf but don’t want to import or hardcode them into the flash file or paths to xml or flv files to use as well. Actionscript 3 has a different procedure than as2 did as to how you read these flashvars from the actionscript side. The embed codes and html side of things are still the same, but in case your new to actionscript altogether, I’ll give an example of the html as well.

1
2
3

In actionscript 3 we use the loaderInfo object to access the flashvars. The parameters Object of the loaderInfo will contain all the flashvar variables and values.

1	this.loaderInfo.parameters

As an example of something that is visual I’ve created this little app to read some options from flashvars about colors. An app that will read a list of colors and update a box that is on the stage already to those colors with the specified delay. I always have fun with randomness so I threw in the option for random colors as well. This file looks for certain flashvars: color, loop, delay and random. These are the keys or names of the variables and they are followed by the values you want them to hold. Note that flashvars can be set in any order, so you don’t have to start with color and end with random.

In this example I’m looking for 4 flashvars specifically (in any order):

colors:String – a comma delimited list of hex colors or simply a string “random” for randomly generated colors (the hex for black #000000 needs to be 0×000000 in flash) (default is random)
loop:Boolean – whether or not to repeat these colors (default is true)
delay:Number – the delay between colors (in seconds). (default is 1 second)
random:Boolean – determines whether to cycle through colors in given order or randomize. selecting random overrides the loop to true. (default is false)

This is much more than is required for this example, but I was having fun playing with random colors and timing and options. I figured it diesn’t hurt to show the effect you can have with a couple different variables on one file. Here is an example using the object tags above:

And here are some more (please don’t have a seizure!)

Here’s the full source if you’re interested:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127

/*
circlecube.com

App to demonstrate the process of getting flashvars from embed code to actionscript (as3)

Displays colors specified.

looking for 4 flashvars specifically (in any order):
colors:String - a comma delimited list of hex colors or simply a string "random" for randomly generated colors (the hex for black #000000 needs to be 0x000000) (default is random)
loop:Boolean - wether or not to repeat these colors (default is true)
delay:Number - the delay between colors (in seconds). (default is 1 second)
random:Boolean - determines wether to cycle through colors in given order or randomize. selecting random overrides the loop to true. (default is false)

*/

//initialize vars
var myflashvars:Object = new Object()
var myColors:Array = new Array("random");
var myLoop:Boolean = true;
var myDelay:Number = 1;
var randomOrder:Boolean = false;
var allRandom:Boolean = false;
//read flashvars in actionscript3
//if colors flashvars doesn't exist use these defaults
if (!this.loaderInfo.parameters.colors){
myflashvars = {colors: "random", delay: 1};
}
else{
myflashvars = this.loaderInfo.parameters;
}
//assign flashvars to variables within flash
for (var item:String in myflashvars) {
trace(item + ":\t" + myflashvars[item]);
if (item == "colors"){
myColors = myflashvars[item].split(',');
}
else if(item == "loop"){
myLoop = parseBoolean(myflashvars[item]);
}
else if(item == "delay"){
myDelay = myflashvars[item];
}
else if(item == "random"){
randomOrder = parseBoolean(myflashvars[item]);
}
}

//use my variables!
if (myColors[0] == "random"){
allRandom = true;

}
var counter:Timer = new Timer(myDelay * 1000);
counter.addEventListener(TimerEvent.TIMER, nextColor);
trace ("color number: 0", "color hex: "+myColors[0]);
setColor(myBox, myColors[0]);

counter.start();
stop();
function nextColor(e:Event):void{
//cycle through colors
if (!allRandom && !randomOrder){
if (counter.currentCount+2 > myColors.length){
if (myLoop == true || myLoop == "true"){
counter.reset();
counter.start();
}
else{
counter.stop();
}
}
trace ("color number: "+counter.currentCount, "color hex: "+myColors[counter.currentCount]);
setColor(myBox, myColors[counter.currentCount - 1]);
}
//randomly select a color from the myColors array
else if (!allRandom && randomOrder){
var randomColor = Math.floor(Math.random() * myColors.length);
trace ("random number: "+randomColor, "color hex: "+myColors[randomColor]);
setColor(myBox, myColors[randomColor]);
}
//randomly create colors
else{
trace ("number: "+counter.currentCount, "color hex: "+myColors[0]);
setColor(myBox, myColors[0]);
}
}
function setColor(item:DisplayObject, col):void{
if (col == "random"){
setRandomColor(item);
}
else{
setHexColor(item, col);
}

}
function setHexColor(item:DisplayObject, col:Number):void {
var myColor:ColorTransform = item.transform.colorTransform;
//check color bounds
if (col > 16777215) col = 16777215;
else if (col < 0) col = 0;
myColor.color = col;
item.transform.colorTransform = myColor;
}
function setRandomColor(item:DisplayObject):void{
setColor(item, (Math.floor(Math.random() * 16777215)));
}
function parseBoolean(str:String):Boolean
{
switch(str.toLowerCase())
{
// Check for true values
case "1":
case "true":
case "yes":
return true;

// Check for false values
case "0":
case "false":
case "no":
return false;

// If all else fails cast string
default:
return Boolean(str);
}
}

Tutorial to Create a Responsive Image Scroller in ActionScript 3.0

Evan Mullins — Wed, 26 Aug 2009 18:55:02 +0000

I’ve written a tutorial which is published over at flash.tutsplus. This tutorial demonstrates how to create a horizontally scrolling image viewer and covers xml parsing, loading and resizing external images, and creating intuitive and responsive scrolling!

So check out the Tutorial to Create a Responsive Image Scroller in ActionScript 3.0 over at flash.tutsplus.com!

You’ll find full source code available for download as well as the demo files and step by step milestones all throughout the tutorial.

circlecube’s New Clothes – Theme Redesign

Evan Mullins — Tue, 28 Jul 2009 23:48:35 +0000

Thanks for your patience as I’ve been tinkering with the theme, layout and css of circlecube.com.

old theme

The last theme I used was badly broken with the wordpress 2.8 update and then I noticed the developer actually discontinued support for the theme! So I had an opportunity to delve into wordpress theming. I’d been reading about child themes and wanted a nice stable basic parent theme to build from. Cue thematic framework. It was a great learning experience building a child theme for myself, many thanks to Ian Stewart for all the tips help and tuts to help me though it, not to mention for creating thematic .

new theme

I’ve kept the color scheme and general look of the site the same. So the reason I’m going on about it is I think I’m finished… and I’m asking you to let me know if you see anything that looks odd or fishy, or even just want to make a suggestion or comment on how much you like/hate the redesign. Comment on this post or contact me!

And as always, if there’s something you would like me to write about or have questions you can also contact me. I’ve even set up a poll in the sidebar showing post ideas I have which you can vote on and encourage me to write the one(s) you want most first! So let me know what you want, it encourages me to write more. And be sure to subscribe to the circlecube rss feed so you won’t miss anything that’s coming up!

Stomper999

Evan Mullins — Fri, 24 Jul 2009 21:44:49 +0000

Interactive Design project for StomperNet’s tease of the announced reveal on 09/09/09 at 09:09:09!

“Online Marketing Changes Forever!”

Wanted it to be unexpected, and I think we hit it! Check it out live at stomper999.com!

Details:
For this project I used flash, html, css and javascript. Tweener for the fading effects. Found a nice stock flash from flashDen for the countdown and used jquery and the easing and color plugins.