how to create the scrolling Menu in css?


Tags: jquery,html,css

Problem :

I wants to create something like this

enter image description here

Actually I really don't know what t0 call if anybody know then let me know so I can search also on google.

when we click on the arrow the other result should come I will be having manny fixtures

I was thinking about

1> A table having a column and show them one by one

2>a dynamic list having the whole list?

Suggestions Required.

I am not knowing anything about the css and javascript for this can you please show me some path for this. Thank you.



Solution :

I have made some amendments to Tim4497's method.

This method allows for any number of list items, and has the advantage of being a pure Javascript solution (no JQuery required!)

This method arranges list items horizontally through means of float: left, and then causes a break in the list by setting the ul element to a fixed width of 400px. Elements that overflow are hidden by overflow: hidden.

var list_items = [];
var index = 0;
var list_length = 0;

function getAllListItems() {
    var temp = document.getElementsByTagName('li');

    for (i = 0; i < temp.length; i++) {
        list_items.push(temp[i]);
    }

    list_length = temp.length;
}

The following function

function move(dir){}

is attached to a button element as follows :

<button id='right' onClick='move(right)'>></button>

and it intelligently hides the correct element to give the effect of moving right.

function move(dir) {
    if (dir == left) {
        list_items[index].style.display = 'block';
        index--;

        if (index < 0) {
            index = 0;
        }
    } else if (dir == right) {

        list_items[index].style.display = 'none';

        if (index >= ((list_length) - 1)) {
            index = (list_length) - 1;
        } else {
            index++;
        }
    } else {}
}

Relevant JSFiddle


    CSS Howto..

    How to Position an Image underneath a form in CSS

    How to align item to the very bottom within flexible box layout column?

    How can I get a label to right align in a table “cell” (td)?

    How to make a gallery

    How can I achieve this transparency effect using css?

    How to identify unused css definitions [closed]

    How to apply color to all element between the first and the last without giving a number to nth-child()?

    How to make a content div stretch from a header div to a footer div?

    How can I center a div within another div?

    How do I align my label to the left of my text input box with CSS?

    how can resize dynamically the logo of the header?

    How to scrape a live java script webpage in R?

    AJAX Call returns JSON, how to render properly formatted data

    How do I prevent this list from moving across the page?

    Boostrap 3: how to force the content of layout columns to be of same height?

    How to override Zurb Foundation css properties using rails 3.1?

    How prevent inheriting “position: relative” CSS

    How to apply an active state to a CSS sprite?

    How to get variable`s value of CSS from database in yii?

    why is the space (shown in image) is added below when using vertical-align? How to fix it?

    How would I name this HTML code so I could edit it with CSS? [closed]

    How to horizontally center a link element with CSS?

    How to get the Apple Javascript Split Flap Counter to run on pure CSS

    How to create dynamic table 4 columns per row using GridView?

    Show an image from b&w to color as if it were loading (left to right)

    Show hidden image with jQuery

    how to change the css in td on mouse click using javascript

    How to Bring a h1 to top of the div?

    How to vertically align div text?

    CSS: How to load a css file for all browsers except IE?