Sample HTML CSS List Template

Sample HTML CSS List Template

Nowadays almost every web page has a list of items. In this article, we prepared samples of HTML list template with CSS. These lists can be useful to display menu items too.

With CSS you can make stylish and beautiful lists by combining HTML and CSS code snippets. The following examples contain HTML list CSS examples. Some of them have JavaScript codes to add more extra advanced beautiful effects.

If you wonder how to make an HTML list look good? See the following hand-pick examples that you can use in your web pages.

HTML CSS List Effects

Effect #1

In this example if you go on items, the item will move to right.

  • Honar Systems
  • HTML Tutorial
  • CSS Tutorial
  • JavaScript Tutorial
<ul class="item1"> 
    <li>Honar Systems</li> 
    <li>HTML Tutorial</li> 
    <li>CSS Tutorial</li> 
    <li>JavaScript Tutorial</li> 
</ul>
ul { 
    list-style-type: none; 
    width: 200px; height: auto; 
} 
ul li { 
    padding: 10px 0; 
    border-bottom: 1px solid #add8e6; 
    text-align: left; 
    transition: padding-left 0.3s linear, font-weight 0.2s linear, color 0.3s linear; 
    -webkit-transition: padding-left 0.3s linear, font-weight 0.2s linear, color 0.3s linear; 
    -moz-transition: padding-left 0.3s linear, font-weight 0.2s linear, color 0.3s linear; 
    -o-transition: padding-left 0.3s linear, font-weight 0.2s linear, color 0.3s linear; 
    -ms-transition: padding-left 0.3s linear, font-weight 0.2s linear, color 0.3s linear; 
} 
ul li:first-child { 
    border-top: 1px solid #909; 
} ul li:hover { 
    padding-left: 20px; 
    font-weight: 600; 
    color: #add8e6; 
}

List Effect #2

Display items from left to right when you scroll to view list.

html list effect with css and javascript - honarsystems

Add below link inside your <head> tag.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<ul class="item2"> 
    <li><a href="https://www.honarsystems.com/">Honar Systems</a></li> 
    <li><a href="#">HTML Tutorial</a></li> 
    <li><a href="#">CSS Tutorial</a></li> 
    <li><a href="#">JavaScript Tutorial</a></li> 
</ul>
    ul.item2{
        list-style: none;
    }

    ul.item2 li{
        opacity: 0;
        left: -100%;
    }

    ul.item2 li a{
        text-decoration: none;
        padding: 5px 15px;
        margin: 1px 0;
        display: inline-block;
        background: #909;
        color: #fff;
    }

    ul.item2-after li{
        opacity: 1;
        left: 0;
    }
    (function($){

        var defaults = {
            duration: 0.5,
            pause: 0.5,
            delaybeforestart: 'onvisible',
            postclass: 'animated-after'
        };

        function css3propmap(){
            var vendorprefixes = ['-ms-', '-o-', '-moz-', '-webkit-'], propmap = {};
            for (var i=0; i 0 && (range[0]-field[0]) <= fieldspan )
                    return true;
                else{
                    if ( (range[0]-field[0]) < 0 && (range[0]+rangespan) >= field[0] )
                        return true;
                }
                return false;
            }

            if (Array.filter && !$(window).data('scrollbind')){
                var $window = $(window);
                $window.bind('scroll.scrollbind', function(){
                    var scrolltop = $window.scrollTop(), animatedlists = $.animatedlists;
                    animatedlists = animatedlists.filter(function(el, index){
                        return (!el.shownflag && inrange([el.offsettop, el.offsettop+el.ulheight], [scrolltop, scrolltop+$window.height()]));
                    });
                    for (var i=0; i < animatedlists.length; i++){
                        animatedlists[i].$ul.addClass(animatedlists[i].postclass);
                        animatedlists[i].shownflag = true;
                    }
                });
                $window.bind('load', function(){
                    var animatedlists = $.animatedlists;
                    for (var i=0; i < animatedlists.length; i++){
                        animatedlists[i].offsettop = animatedlists[i].$ul.offset().top;
                        animatedlists[i].ulheight = animatedlists[i].$ul.outerHeight();
                    }
                    $window.trigger('scroll.scrollbind');
                });
                $(window).data('scrollbind', true);
            }

            return this.each(function(){
                var $ul = $(this).css({overflow:'hidden'});
                var o = $.extend({}, defaults, options);
                var $lis = $ul.children('li').css({position:'relative'});
                $lis.each(function(i){
                    $(this).css(css3propmap(['transition', 'all ' + o.duration + 's ease-in-out ' + i * (o.pause) + 's']));
                });
                if (typeof o.delaybeforestart == "number"){
                    setTimeout(function(){$ul.addClass(o.postclass)}, o.delaybeforestart * 1000);
                }
                else if (o.delaybeforestart == "onvisible" && Array.filter){
                    var offsettop = $ul.offset().top;
                    $.animatedlists.push({$ul:$ul, offsettop:offsettop, ulheight:$ul.outerHeight(), shownflag:false, postclass:o.postclass});
                }
                else{
                    $ul.addClass(o.postclass);
                }
            })
        }

    })(jQuery);

    jQuery(function($){
        $('ul.item2').animatelist({pause: 1, postclass: 'item2-after'});
    });

List Effect #3

Display list items with from bottom to top effect.

html list effect with css and javascript - honarsystems
<ul class="item3"> 
    <li>Honar Systems</li> 
    <li>HTML Tutorial</li> 
    <li>CSS Tutorial</li> 
    <li>JavaScript Tutorial</li>  
</ul>
    ul.item3 {
        width: 300px;
    }
    ul.item3 li {
        position: relative;
        display: block;
        border: 1px solid #909;
        margin-bottom: 5px;
        padding: 10px;
        text-align: center;
        text-transform: uppercase;
        animation: fadeIn 0.5s linear;
        animation-fill-mode: both;
    }
    ul.item3 li:nth-child(1) {
        animation-delay: 0.25s;
    }
    ul.item3 li:nth-child(2) {
        animation-delay: 0.5s;
    }
    ul.item3 li:nth-child(3) {
        animation-delay: 0.75s;
    }
    ul.item3 li:nth-child(4) {
        animation-delay: 1s;
    }
    @-webkit-keyframes fadeIn {
        0% {
            opacity: 0;
            top: 100px;
        }
        75% {
            opacity: 0.5;
            top: 0px;
        }
        100% {
            opacity: 1;
        }
    }

List Effect #4

Background color change when mouse hover.

  • Honar Systems
  • HTML Tutorial
  • CSS Tutorial
  • JavaScript Tutorial
<ul class="item4">
    <li>Honar Systems</li>
    <li>HTML Tutorial</li>
    <li>CSS Tutorial</li>
    <li>JavaScript Tutorial</li>
</ul>
   ul.item4 {
        list-style: none;
        padding: 0;
        margin: 0
    }

    ul.item4 li {
        width: 300px;
        display: block;
        padding: 20px;
        background: linear-gradient(to right, rgba(153, 0, 153, .2) 50%, #909 0);
        color: #333;
        margin: 1px 0;
        text-decoration: none;
        background-size: 200%;
        background-position: 0;
        transition: all .2s ease;
        -webkit-transition: all .2s ease;
        -moz-transition: all .2s ease;
        -o-transition: all .2s ease;
    }

    ul.item4 li:hover {
        color: #fff;
        background-position: -100%;
    }
    ul.item4 {
        list-style: none;
        padding: 0;
        margin: 0
    }

    ul.item4 li {
        width: 300px;
        display: block;
        padding: 20px;
        background: linear-gradient(to left, #909  50%, rgba(153, 0, 153, .2) 0);
        color: #333;
        margin: 1px 0;
        text-decoration: none;
        background-size: 200%;
        background-position: 0;
        transition: all .2s ease;
        -webkit-transition: all .2s ease;
        -moz-transition: all .2s ease;
        -o-transition: all .2s ease;
        text-align: right;
    }

    ul.item4 li:hover {
        color: #fff;
        background-position: 100%;
    }

List Effect #5

  • Honar Systems
  • HTML Tutorial
  • CSS Tutorial
  • JavaScript Tutorial
<ul class="item5">
    <li>Honar Systems</li>
    <li>HTML Tutorial</li>
    <li>CSS Tutorial</li>
    <li>JavaScript Tutorial</li>
</ul>
    .item5{
        list-style: none;
        width: 300px;
    }

    .item5 li{
        padding: 5px;
        margin: 1px 0;
    }
    .item5 li:hover {
        color: #909;
    }

    .item5 li:after {
        content: "";
        display: block;
        height: 3px;
        width: 0;
        background-color: #909;
        transition: all .2s ease-in-out;
        -webkit-transition: all .2s ease-in-out;
        -moz-transition: all .2s ease-in-out;
        -o-transition: all .2s ease-in-out;
    }

    .item5 li:hover:after {
        content: "";
        display: block;
        height: 3px;
        width: 100%;
        background-color: #909;
    }

List Effect #5

In this example in hover, the bottom border of the item will be grown.

  • Honar Systems
  • HTML Tutorial
  • CSS Tutorial
  • JavaScript Tutorial
<ul class="item5">
    <li>Honar Systems</li>
    <li>HTML Tutorial</li>
    <li>CSS Tutorial</li>
    <li>JavaScript Tutorial</li>
</ul>
    .item5{
        list-style: none;
        width: 300px;
    }

    .item5 li{
        padding: 5px;
        margin: 1px 0;
    }
    .item5 li:hover {
        color: #909;
    }

    .item5 li:after {
        content: "";
        display: block;
        height: 3px;
        width: 0;
        background-color: #909;
        transition: all .2s ease-in-out;
        -webkit-transition: all .2s ease-in-out;
        -moz-transition: all .2s ease-in-out;
        -o-transition: all .2s ease-in-out;
    }

    .item5 li:hover:after {
        content: "";
        display: block;
        height: 3px;
        width: 100%;
        background-color: #909;
    }