I have a horizontal tab menu. These tabs are all li elements. I show always 5 of them at once. To the left and right I have buttons which scrolls these tabs to either side. I am just not sure how to achieve that. Can I put the next 5 tabs in a different div which will be shown on click? That wouldnt be the best solution, would it? Can I do this somehow with JavaScript or jQuery?
Thanks.
You can do this w/ jQuery. Easier if all of the tabs are the same width. You can position the UL inside a DIV that has overflow: hidden and position: relative. Then the UL can slide around inside the DIV using the animate() method (or the css() method). Check them out on http://api.jquery.com.
Here's an example:
<!DOCTYPE HTML>
<html>
<head>
<style>
* { margin: 0; padding: 0; }
body { padding: 30px; }
div#tabs { width: 360px; height: 30px; overflow: hidden; position: relative; }
ul { display: block; float: left; width: 1080px; position: absolute; left: -360px; }
li { display: block; float: left; width: 70px; height: 30px; font-size: 12px; border: 1px solid #333; }
button { float: left; width: 100px; margin: 20px; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script>
$(document).ready(function()
{
$("button").click(function()
{
var tabs_list = $("div#tabs > ul");
if($(this).is("#left"))
{
tabs_list.animate({ left: "-=360" }, 500);
}
else if($(this).is("#right"))
{
tabs_list.animate({ left: "+=360" }, 500);
}
});
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
<li>six</li>
<li>seven</li>
<li>eight</li>
<li>nine</li>
<li>ten</li>
<li>eleven</li>
<li>twelve</li>
<li>thirteen</li>
<li>fourteen</li>
<li>fifteen</li>
</ul>
</div>
<button id="left">scroll left</button>
<button id="right">scroll right</button>
</body>
</html>
This would need some more work in order to de-activate or hide the scroll buttons when you've reached the beginning or end of the tabs list, but this should get you started.
I like Elliot's solution. I have another one, which will work if the tabs are of different lengths. It does it by hiding and showing the individual "li"s as you click the "right" and "left" buttons. The code also takes care of moving the tabs 5 at a time, both left and right, and handles the end cases.
<!DOCTYPE HTML>
<html>
<head>
<style>
#left, #right {float: left; position: relative; margin: 0; padding: 0;}
#tabs {float: left; position: relative; list-style: none; margin: 0; padding: 0;}
#tabs li {float: left; display: none; border: 2px solid #000; width: 50px; text-align: center;};
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var tabs = $('#tabs li'), number_of_tabs = tabs.length;
var tabs_visible = Math.min(5, number_of_tabs), low_tab = 0, high_tab = (tabs_visible - 1);
$(tabs).filter(function(index){return (index < tabs_visible);}).show();
$('#left, #right').each(function(){
$(this).click(function(){
if ($(this).is('#right')) {
var high_tab_new = Math.min((high_tab + tabs_visible), (number_of_tabs - 1));
var low_tab_new = high_tab_new - tabs_visible + 1;
$(tabs).filter(function(index){
return (index >= low_tab) && (index < low_tab_new);
}).hide();
$(tabs).filter(function(index){
return (index > high_tab) && (index <= high_tab_new);
}).show();
low_tab = low_tab_new;
high_tab = high_tab_new;
} else {
var low_tab_new = Math.max((low_tab - tabs_visible), 0);
var high_tab_new = low_tab_new + tabs_visible - 1;
$(tabs).filter(function(index){
return (index > high_tab_new) && (index <= high_tab);
}).hide();
$(tabs).filter(function(index){
return (index >= low_tab_new) && (index < low_tab);
}).show();
low_tab = low_tab_new;
high_tab = high_tab_new;
}
});
});
</script>
</head>
<div id="nav3">
<button id="left">left</button>
<ul id="tabs">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
<li>F</li>
<li>G</li>
<li>H</li>
<li>I</li>
</ul>
<button id="right">right</button>
</div>
</body>
</html>
Though I am not sure how would the tab look like, I am assuming that with the 5 tabs you are showing different set of page content.
I am suggesting a simple solution (Design) with Javascript. See if it works.
Have a variable to store the current View index. e.g. _currentView.
Place the content of 5 tabs in 5 views (When I say views there are many ways to establish it, ranging from using div object to using .net multiview control).
By default keep their visibility off.
Create a method, that'll accept the _currentView as the parameter. In this method, just make the current view visible.
On the click of left and right arrow, increment or decrement the _currentView value and call the method that activates the current view.
Please see if this helps you.
Related
I made a website where there are a bunch of links that load into an iframe. There are buttons that allow the user to navigate to the next and previous links in the list. I used this to do that.
var i = 0, links = $('a').toArray();
$('.next').click(function() {
i++;
if(i === links.length){ i = links.length - 1; }
$('.frame').attr('src', links[i]);
});
//loads next link in iframe
$('.prev').click(function() {
i--;
if(i < 0){ i = 0; }
$('.frame').attr('src', links[i]);
});
//loads previous link in iframe
The problem is that if a user clicks on say the 3rd link, and then clicks the next button, it does not go to the 4th link, but rather to the 2nd link, since the click function just changes the value of i which is set to 0 by default.
To solve this I thought of creating another variable that stored the current link loaded in the iframe as such:
var current = $('.frame').contents().get(0).location.href
and then setting the value of i according to the index value of the current link as such:
var i = links.indexOf(current)
Note: I am aware that
$('.frame').contents().get(0).location.href
will cause cross-domain errors. The links I am using are from the same domain so this won't be a problem.
Sadly, this doesn't work. Any clue where I'm going wrong? Here's a fiddle.
JSFiddle
I have to use only Javascript (Jquery is fine). Please keep in mind that creating an array with the links inserted manually is not an option since there are a large number of links and more being added.
Your problem is that your i variable keep the previous index from the previous clicking on the next/prev buttons. You should fixc your code, that when the user clicks any link, i will update, as follows:
var i = 0, links = $('a').toArray();
$('.next').click(function() {
i++;
if(i === links.length){ i = links.length - 1; }
$('.frame').attr('src', links[i].href); // To get the src you must get href attribute
});
//loads next lesson in iframe
$('.prev').click(function() {
i--;
if(i < 0){ i = 0; }
$('.frame').attr('src', links[i].href); // To get the src you must get href attribute
});
//loads previous lesson in iframe
$('a').click(function() {
i = links.indexOf(this);
});
.nav {
top: 0;
z-index: 2;
width: 100%;
background: #212121;
}
.nav button {
font-size: 25px;
color: white;
padding: 10px;
width: 100px;
border-color: white;
border-radius: 8px;
background-color: #212121;
margin: 5px;
}
/*nav menu buttons*/
.frame {
height: 50vh;
width: 100%;
border: solide white 1px;
}
body {
background: #212121;
color: white;
font-family: 'Nanum Gothic', 'calibri';
margin: 5px;
}
/*body view*/
a {
padding: 5px 0px 5px 30px;
display: block;
font-size: 20px;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class= "nav">
<button class="prev">Prev</button>
<!--previous lesson button-->
<button class="next">Next</button>
<!--next lesson button-->
</div>
<iframe name="content" class="frame" src=""></iframe>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
</ul>
The thing is that I need to make a vertical images slider,so that when i press arrow down/arrow up every image changes it's position (the highest one goes bottom,the previous take it's place)
what it should look like:
what i have got so far:
$(function(){
var $vsliderboxes = $('#vsliderboxes'),
$vslidernav = $('#vslidernav'),
boxHeight = $vsliderboxes.height(),
current_index = 0;
function clickslide(){
clearInterval(intervalTimer);
clearTimeout(timeoutTimer);
timeoutTimer = setTimeout(function () {
intervalTimer = window.setInterval(autoslide, 2000);
}, 2500);
var index = $(this).index();
current_index = index;
$vsliderboxes.children().stop().animate({
top : (boxHeight * index * -1)
}, 500);
}
function autoslide(){
current_index++;
if (current_index >= $vsliderboxes.children().children().length) {
current_index = 0;
}
$vslidernav.find('a').eq(current_index).trigger('click');
}
$vslidernav.find('a').click(clickslide);
var intervalTimer = window.setInterval(autoslide, 2000),
timeoutTimer = null;
});
#vslidernav ul {
list-style: none;
padding: 0;
}
#vslidernav ul a {
padding: 0;
cursor: pointer;
height: 50px;
}
#vslidernav ul a:active {
color: #9C9A99;
}
#vslidernav ul a li {
height: 50px;
}
#vslidernav ul .active li {
}
.#vslidernav ul a:active {
background: transparent;
color: #9C9A99;
}
.vslider {
display: inline-block;
}
#vslidernav {
float: left;
width: 100px;
z-index: 1;
height: 250px;
}
#vsliderboxes {
position : relative;
overflow : hidden;
}
#vsliderboxes div {
height: 250px;
width: 900px;
}
#vsliderboxs-inner {
position : relative;
width : 900px;
height : 250px;
}
<div class="vslider">
<div id="vslidernav">
<ul>
<a id="1">
<li><img src="img/arrtop.gif"></li>
</a>
<a id="2">
<li><img src="img/arrdown.gif"></li>
</a>
<a id="3">
<li></li>
</a>
</ul>
</div>
<div id="vsliderboxes">
<div id="vsliderboxs-inner">
<div id="box1" class="active"><img src="img/slide1.gif"></div>
<div id="box2" class="inactive"><img src="img/slide2.gif"></div>
<div id="box3" class="inactive"><img src="img/slide3.gif"></div>
</div>
</div>
</div>
thanks for any advice
I think, that it isn't possible to solve this issue like you try to.
Because, when you work with the "top" property, you can't take one image from the top and append it to the other end because appending the image, will move the other images to another place --> the top property wouldn't be correct any more.
I think the contributed sliders (e.g. http://www.jssor.com/demos/vertical-slider.slider) work with the transform CSS property.
transform: translate3d()
Try to research about this property.
Roko C. Buljan answered on this page: loop carousel jquery
He uses a scrollTop loop for your problem.
I've also written a simple slider some time ago. I have now implemented the Roku C. Buljan method. Feel free to look at my code on Bitbucket.
https://bitbucket.org/d-stone/jqueryslider
An excerpt may help you:
value = prev_or_next == 'next' ? self.globals.slide_height : 0;
last = $('#container').find('> div:last');
first = $('#container').find('> div:first');
if(prev_or_next == 'prev') { // click on "next"-button
first.before(last); // put last element before first
settings.elements.inner.scrollTop(self.globals.slide_height); // set the scrollTop to 1 slide-height
}
// animation itself:
$('#container').stop().animate({scrollTop: value}, {
duration: settings.slide_speed,
done: function() {
if(prev_or_next == 'next') {
// put first item after last
last.after(first);
}
}
});
I'd advise you to validate your HTML (W3C Validator). There are some errors inside.
Invalid HTML can be the reason for some CSS and Javascript Errors.
I'm looking to learn how to do this left menu :
http://js.devexpress.com/New/15_2/#HTML_5_JS_Core
When you scroll down the page, the "active" menu item change.
p.s.
Is there a name for this type of menu?
regards,
yaniv
Scroll Navigation
That is how we call these type of navigation bars. Basically you have to listen to the scroll event and calculate which element is in the viewport at the moment than you add a class to your navigation that marks the current menu element.
There is a nice demo built in jQuery but because jQuery is a thing of the past, I built one in Vanilla JS. See comments for explanations.
There are different ways to define which is the current element. In my Example it is the last one whose top line just passed the top line of the browser.
Working demo
window.onscroll = onScroll;
function onScroll() {
var removeActiveClass = function (elements) {
for (var i = 0; i < elements.length; ++i) {
elements[i].classList.remove('active');
}
}
var anchors = document.querySelectorAll('#menu-center a');
var previousRefElement = null;
for (var i = 0; i < anchors.length; ++i) {
// Get the current element by the id from the anchor's href.
var currentRefElement = document.getElementById(anchors[i].getAttribute('href').substring(1));
var currentRefElementTop = currentRefElement.getBoundingClientRect().top;
// Searching for the element whose top haven't left the top of the browser.
if (currentRefElementTop <= 0) {
//The browser's top line haven't reached the current element, so the previous element is the one we currently look at.
previousRefElement = anchors[i];
// Edge case for last element.
if (i == anchors.length - 1) {
removeActiveClass(anchors);
anchors[i].classList.add("active");
}
} else {
removeActiveClass(anchors);
previousRefElement.classList.add("active");
break;
}
}
}
body, html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.menu {
width: 100%;
height: 75px;
position: fixed;
background-color:rgba(4, 180, 49, 0.6);
}
#menu-center {
width: 980px;
height: 75px;
margin: 0 auto;
}
#menu-center ul {
margin: 15px 0 0 0;
}
#menu-center ul li {
list-style: none;
margin: 0 30px 0 0;
display: inline;
}
.active {
font-size: 14px;
color: #fff;
text-decoration: none;
line-height: 50px;
}
a {
font-size: 14px;
color: black;
text-decoration: none;
line-height: 50px;
}
.content {
height: 100%;
width: 100%;
}
#portfolio {background-color: grey;}
#about {background-color: blue;}
#contact {background-color: red;}
<div class="menu">
<div id="menu-center">
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>Portfolio</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
<div id="home" class="content"></div>
<div id="portfolio" class="content"></div>
<div id="about" class="content"></div>
<div id="contact" class="content"></div>
This is not exactly menu type, it is the way how you can position objects by html.
You can use position:Abosule property to achieve this effect:
http://www.w3schools.com/css/tryit.asp?filename=trycss_position_fixed
By this given divs are "flying" above the res of the page. In your case it could be a menu.
EDIT:
To sync this you need to detect when given anchor is currently seen.
It can be done by jQuery, this is sample draft of code, should explain clue of solution:
// list of header on page
var positions = [
$("#anchor1").offset().top,
$("#anchor2").offset().top,
$("#anchor3").offset().top,
];
var menu_objects= [
"#menu1",
"#menu2",
"#menu3"
];
var $w = $(window).scroll(function(){
// clear old
for(var v in menu_objects)
$(v).css({"color","white"});
for(var i=positions.length-1;i>=0;i--)
{
if(positions[i]>=$w.scrollTop())
{
$(menu_objects[i]).css({"color","red"});
break;
}
}
});
I am doing a functionality for my website, where I want a functionality as same here.
In detail: When I hover on navigation, I want to make the background light.
Do let me know if needed anything else.
I hope I understand your question. See the example below:
$(document).ready(function() {
$("ul li").mouseover(function () {
$(this).addClass('light-bg', 1000);
$('body').addClass('new-body-bg', 1000);
});
$("ul li").mouseleave(function () {
$(this).removeClass('light-bg', 1000);
$('body').removeClass('new-body-bg', 1000);
}); });
ul {
background-color: #ddd; /* Choose the color of your choice */
height: 40px;
}
li {
display: inline-block;
font-size: 18px;
padding: 10px;
line-height: 20px;
text-align: center;
margin-right: 15px;
}
.light-bg {
background-color: #fff; /* Choose the color of your choice */
line-height: 20px;
}
.new-body-bg {
background-color: #ccc; /* Choose the color of your choice */
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li> One </li>
<li> Two </li>
<li>Three </li>
<li> Four</li>
</ul>
It works perfectly on JsFiddle
See: http://jsfiddle.net/snlacks/tekokmke/1/
Without using jQuery,
you want to find all of the elements you want to do this to
then you want to loop through them
You'll apply two listeners to each one, one for entering and one for leaving.
js:
var mes = document.querySelectorAll(".me");
function changeIn(){
document.body.style.backgroundColor = "lightgray";
}
function changeOut(){
document.body.style.backgroundColor = "darkgray";
}
for(i = 0; i < mes.length; i++){
mes[i].onmouseenter = changeIn;
mes[i].onmouseleave = changeOut;
}
I am able to do the list using float:left; like this
But I would like to show it like this (as 2 or more columns)
How can I do that?
#sandeep gave good solution. Unfortunately does not work in IE(need ie7 and above).
any help?
For this, you can use the column-count property:
div#multicolumn1 {
-moz-column-count: 2;
-moz-column-gap: 50%;
-webkit-column-count: 2;
-webkit-column-gap: 50%;
column-count: 3;
column-gap: 50%;
}
Check this jsFiddle.
Note: It does not work in IE.
For IE, you can use this JavaScript: CSS3 - Multi Column Layout Demonstration
This works just fine cross-browser, no JS required. You just limit the width of your columns.
<style>
ul.col {width:60px;float:left;margin:0 5px 0 0;padding:0;}
ul.col li {width:50px;background:#999;list-style-type:none;margin:0 0 5px 0;padding:5px;}
</style>
<ul class="col">
<li>1(li)</li>
<li>2(li)</li>
<li>3(li)</li>
<li>4(li)</li>
<li>5(li)</li>
</ul>
<ul class="col">
<li>6(li)</li>
<li>7(li)</li>
<li>8(li)</li>
<li>9(li)</li>
<li>10(li)</li>
</ul>
If you are stuck with them all in one UL on page load, you can split them out with jQuery to create the same results:
<script>
$(function(){ //on document ready
var perCol = 5;
var $ul = $('ul.col');
var rows = Math.ceil($ul.find('li').length/perCol);
for(var i=1;i<=rows;i++){
$ul.after('<ul class="col"></ul>');
}
for(var i=1;i<=rows;i++){
$ul.find('li:lt('+(perCol)+')').appendTo('ul.col:eq('+(i)+')');
}
$ul.remove();
});
</script>
As long as your list items are a fixed width, like in your examples, couldn't you just do something like in this fiddle? http://jsfiddle.net/swNYE/1/
And wherever your list gets spit out, simply apply the "left" class to the first half, and the "right" class to the second half. If you're dynamically adding content through Javascript, then you'd simply run through the li's each time something is added, and apply the new correct class.
HTML:
<ul>
<li class="left">1</li>
<li class="left">2</li>
<li class="left">3</li>
<li class="left">4</li>
<li class="right">5</li>
<li class="right">6</li>
<li class="right">7</li>
<li class="right">8</li>
</ul>
CSS:
li {
width: 100px;
}
li.left {
float: left;
clear: left;
}
li.right {
margin-left: 100px;
}
Below is a columnizer, takes as argument the number of columns.
Call: $(elem).columnize(3)
http://jsfiddle.net/Bdsj9/28/
Tested in IE6 from wine in Ubuntu 10.04: works (looks better if you increase the width in the stylesheet I borrowed from #micha -- thanks, btw)
(function($) {
$.fn.decolumnize = function() {
this.children().map(function(index, el) {
var oldPos = null;
var posClass = null;
if($(el).attr("class") && (posClass = $(el).attr("class").match(/orig\-readorder\-[0-9]+/))) {
oldPos = parseInt(posClass[0].replace("orig-readorder-", ""));
$(el).removeClass(posClass[0]);
}
return {
elm: el,
pos: oldPos ? oldPos : index
}
}).sort(function(a,b) {
return a.pos > b.pos ? 1 : -1;
}).map(function(index, ob) {
return ob.elm;
}).appendTo(this);
return this.children().css("float", "left").css("clear", "none");
};
$.fn.columnize = function(numcols) {
var numItems = this.children().length;
var divisor = Math.ceil(numItems / numcols);
var indexOfFinal = null;
this.decolumnize();
var resorted = this.children().map(function(index, el) {
return {
position: (index % divisor) + (index / numItems),
elm: el,
isFinal: index == numItems - 1,
origPos: index
};
}).sort(function(a, b) {
return a.position > b.position ? 1 : -1;
});
return resorted.map(function(index, ob) {
if (indexOfFinal) {
/** TODO: fix redundancy **/
if ((index - indexOfFinal - 1) % (numcols - 1) == 0) {
if ($.browser.msie && resorted[index - 1]) $(resorted[index - 1].elm).css("float", "none");
$(ob.elm).css("clear", "left");
}
} else {
/** TODO: fix redundancy **/
if (index % numcols == 0) {
if ($.browser.msie && resorted[index - 1]) $(resorted[index - 1].elm).css("float", "none");
$(ob.elm).css("clear", "left");
}
}
if (ob.isFinal) indexOfFinal = index;
$(ob.elm).addClass("orig-readorder-" + ob.origPos);
return ob.elm;
}).appendTo(this);
};
})(jQuery);
What it does is first calculate the sortorder, because with just styling this will not work. To calculate the sortorder you need to know the number of columns up front. This you can use as a divisor to introduce a 'clear: left'.
Also, using the number of list items and the number of columns you need to estimate a number of rows. This can be used as a divisor to sort the items based on the remainer between their index and the number of rows.
To granulate the sortation, the original index is also taken into account...
After the last orginal item has been placed, the number of columns needs to be reduced by 1. That's why I store the isFinal-boolean. I'm sure this could be done more elegantly with some smart computation, though.
Then introduce the 'clear: left's at the right place and store the original position in a class so you can resort in a later stage (for instance when inserting or removing a list item dynamically)
Best!
I found a way to do this in IE too. (using clear)
html:
<div class="left child">1</div>
<div class="child">5</div>
<div class="left child">2</div>
<div class="child">6</div>
<div class="left child">3</div>
<div class="child">7</div>
<div class="left child">4</div>
<div class="child">8</div>
css:
.child {
height:20px;
width: 20px;
text-align: center;
border: 1px solid #CCC;
background-color: #EEE;
color: #000;
padding: 5px;
float: left;
margin: 5px;
}
.left {
clear: left;
}
See http://jsfiddle.net/pMbtk/31/
SEE MY NEW ANSWER--MUCH BETTER THAN THIS
If you are dealing with fixed width items, then this pure css solution that works in IE7+. The example is http://jsfiddle.net/VVMnq/33/. This would require you to know some things about the html you are working with (where the new column is to start). Here is column 2 longer, just to see how it handles it: http://jsfiddle.net/VVMnq/42/
HTML
<ul class="TwoColumn">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li class="column2">6</li>
<li class="column2">7</li>
<li class="column2">8</li>
<li class="column2">9</li>
<li class="column2">10</li>
</ul>
CSS
.TwoColumn {
width: 20px;
padding-left: 22px; /* width plus borders of li's */
}
.TwoColumn li {
display: block;
width: 100%;
padding: 0;
margin: 0 -22px 0 -22px; /* width of ul plus borders on li's */
float: left;
clear: left;
border: 1px solid blue;
}
.TwoColumn .column2 {
float: none; /* this could be set to float: left and it seemed to work also */
clear: none;
margin: 0 -11px 0 0; /* this should be half of margins for column 1 li's */
}
The CSS:
ul.parent li {
float: left;
}
Using jquery:
$('.parent>li:odd').css("clear", "both");
<ul class="parent">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
Please take a look at http://api.jquery.com/even-selector/ and http://api.jquery.com/odd-selector/
NEW ANSWER that is totally different from the first. This assumes the height is always 5 high (which from comments on jblasco's solution made by anglimas, that is the requirement). The solution here is pure css (though if the number of elements is unknown, then some javascript would be required to "count" and set a class called first to indicate which element is in the first row).
The solution works in IE7+, and will accommodate any number of columns.
See http://jsfiddle.net/VVMnq/107/.
HTML
<ul class="MultiColumn">
<li class="first">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li class="first">6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
CSS
.MultiColumn {
overflow: auto;
background-color: yellow;
padding:0 10px 10px 0;
float: left;
}
.MultiColumn li {
display: block;
width: 20px;
height: 20px;
padding: 0;
margin: 10px 0px 10px 10px ;
background-color: cyan;
float: left;
}
.MultiColumn li.first {
top: 0px;
}
.MultiColumn li.first + li {
margin: 40px 0 0 -20px;
}
.MultiColumn li.first + li + li {
margin: 70px 0 0 -20px;
}
.MultiColumn li.first + li + li + li {
margin: 100px 0 0 -20px;
}
.MultiColumn li.first + li + li + li + li {
margin: 130px 0 0 -20px;
}
http://jsfiddle.net/rlemon/Y5ZvA/3/
you can try this.. I haven't tested it with ie yet.
ul {
width:60px; height: 60px;
}
ul li{
float:left;
width:20px;
list-style:none;
}
ul, ul li {
-moz-transform: rotate(-90deg) scaleX(-1);
-o-transform: rotate(-90deg) scaleX(-1);
-webkit-transform: rotate(-90deg) scaleX(-1);
-ms-transform: rotate(-90deg) scaleX(-1);
transform: rotate(-90deg) scaleX(-1);
/* IE8+ - must be on one line, unfortunately */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=-3.061616997868383e-16, M12=1, M21=1, M22=3.061616997868383e-16, SizingMethod='auto expand')";
/* IE6 and 7 */
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=-3.061616997868383e-16,
M12=1,
M21=1,
M22=3.061616997868383e-16,
SizingMethod='auto expand');
}