Padding list

[saynogo9999]

I have been looking at this and i can't get it working. So i was wondering if some of you could help me get it working or see if there is a better way to create a bar like that.

[Snookerman]

You could achieve the same effect with jQuery but if you want help with the MooTools one:

Please post a link to the page on your site that contains the problematic script or attach your code so we can check it out.

[saynogo9999]

Yes, i need for my blog http://fluzzh.blogspot.com/. And i need it to be placed in the sidebar. Currently ive deleted it.

[Snookerman]

Add this to your the head section of your page:

<script type="text/javascript" src="http://demos111.mootools.net/demos/mootools.svn.js">
</script>
<script type="text/javascript">
    window.addEvent('domready', function(){
        var list = $$('#idList li');
        list.each(function(element){
            var fx = new Fx.Styles(element, {
                duration: 200,
                wait: false
            });
            element.addEvent('mouseenter', function(){
                fx.start({
                    'margin-left': 5,
                    'background-color': '#666',
                    color: '#ff8'
                });
            });
            element.addEvent('mouseleave', function(){
                fx.start({
                    'margin-left': 0,
                    'background-color': '#333',
                    'color': '#888'
                });
            });
        });
    });
</script>
<style type="text/css">
    #idList {
        margin: 0;
        padding: 0;
    } #idList li {
        display: block;
        margin: 0;
        padding: 4px;
        width: 120px;
        background: #333;
        color: #888;
    }
</style>

and this to the body section where you want the menu to appear:

<ul id="idList">
    <li>
        option 1
    </li>
    <li>
        option 2
    </li>
    <li>
        option 3
    </li>
    <li>
        option 4
    </li>
    <li>
        option 5
    </li>
    <li>
        option 6
    </li>
    <li>
        option 7
    </li>
    <li>
        option 8
    </li>
    <li>
        option 9
    </li>
    <li>
        option A
    </li>
    <li>
        option B
    </li>
    <li>
        option C
    </li>
    <li>
        option D
    </li>
    <li>
        option E
    </li>
    <li>
        option F
    </li>
</ul>

Good luck!

[saynogo9999]

Thanks!

[Snookerman]

You're welcome and good luck with your site! You can go to your first post in this thread, click then Go Advanced and add the Resolved prefix to the thread title. This will let other users know the problem has been solved.

[saynogo9999]

Could i do this with a tab menu so the background image fades in??
Like:

<script src='http://demos111.mootools.net/demos/mootools.svn.js' type='text/javascript'/>
<script type='text/javascript'>
    window.addEvent('domready', function(){
        var list = $$('#foxmenu li');
        list.each(function(element){
            var fx = new Fx.Styles(element, {
                duration: 200,
                wait: false
            });
            element.addEvent('mouseenter', function(){
                fx.start({
                    'margin-left': 0,
                    'background': 'url(http://www.saynogo.com/images/tabs.jpg) no-repeat top left',
                });
            });
            element.addEvent('mouseleave', function(){
                fx.start({
                    'margin-left': 0,
                    'background': 'url(http://www.saynogo.com/images/tabs.jpg) no-repeat top right',
                });
            });
        });
    });
</script>

[Snookerman]

I'm not really sure since I don't usually use MooTools. Try it out and see what happens. Just one thing that might cause you problems, don't put a comma after the last "item". So in your example, remove the highlighted:

fx.start({
     'margin-left': 0,
     'background': 'url(http://www.saynogo.com/images/tabs.jpg) no-repeat top right',
});

[saynogo9999]

Nope.. Can't get that working, properly something with the mootools script.. But thanks anyway

[Snookerman]

If you used the code you posted, you won't see any difference since you have the exact same values in both places.