CODEWITHSUNDEEP
htmlcss
ankitd
ankitd

Reputation: 2007

hide/show an element conditionally via css

I am generating Menu Item dynamically.But at a time I am showing 5 Menus. In case number of Menus exceed 5, I am showing <<< Left & >>> Right button to navigate. Is there any work around, by which I can show these buttons only when number of Menus goes beyond 5. Button will be hide, If number of Menu is <=5.

Initially I have 10 Menus:

[Menu1][Menu2][Menu3][Menu4][Menu5][Menu6][Menu7][Menu8][Menu9][Menu10]

Due to space constraint,showing only 5 at a time:

<<< [Menu1][Menu2][Menu3][Menu4][Menu5] >>>

Other Menus can be accessed by clicking Right/Left navigation.

So every time won't be having more then 5 Menus, so In case I have <=5 Menus Right/Left navigation button should not be shown.:

[Menu1][Menu2][Menu3][Menu4][Menu5]

Can we do this work only with CSS? If you need more clarification on question, Please comment.

Upvotes: 1

Views: 5528

Answers (2)

Salathiel Genese
Salathiel Genese

Reputation: 1909

Try this code:

<!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style type="text/css">
            /**
             *
             * General
             *
             **/
            *{
                margin: 0;
                padding: 0;
                border-radius: 0;
                outline-offset: 0;
                border: 0 transparent none;
                outline: 0 transparent none;

                font-family: monospace;
                font-size: 12px;

                text-align: left;
                text-decoration: none;
                text-indent: 0;
                text-transform: none;

                text-align: left;
                color: rgba(120, 120, 120, 1);
                background-color: transparent;
                background-image: none;
            }
            nav::selection,
            nav *::selection{
                background-color: transparent;
            }
            nav{
                display: block;
                font-size: 0;
                text-align: center;
            }
            nav>a,
            nav>span{
                display: inline-block;
                padding: 5px;
                color: rgba(255, 255, 255, 1);
                background-color: rgba(20, 120, 220, .7);
            }
            nav>span{
                cursor: pointer;
                background-color: rgba(120, 120, 120, 1);
            }
            nav>span:first-child{border-radius: 10px 0 0 10px;}
            nav>span:last-child{border-radius: 0 10px 10px 0;}
            /**
             *
             * Focus here
             *
             **/
            nav>a{display: none;}
            nav>a:not(:nth-of-type(n+6)){display: inline-block}
            nav>span:first-child:not(:nth-last-child(n+8)){display: none}
            nav>span:last-child:not(:nth-child(n+8)){display: none}
        </style>
    </head>
    <body>
        <nav>
            <span>&laquo;</span>
            <a href="#">0001</a>
            <a href="#">0002</a>
            <a href="#">0003</a>
            <a href="#">0004</a>
            <a href="#">0005</a>
            <a href="#">0006</a>
            <a href="#">0007</a>
            <a href="#">0008</a>
            <a href="#">0009</a>
            <a href="#">0010</a>
            <a href="#">0011</a>
            <span>&raquo;</span>
        </nav>
        <script type="text/javascript" src="js/libs/jquery/jquery-2.1.1.js"></script>
        <script type="text/javascript">
            $('nav>span:last-child').click(function() {
                $('nav>a:first-of-type').insertBefore(this);
            });
            $('nav>span:first-child').click(function() {
                $('nav>a:last-of-type').insertAfter(this);
            });
        </script>
    </body>
</html>

Upvotes: 0

SW4
SW4

Reputation: 71150

Demo Fiddle

Same code...fewer items

Sure, simply utilise nth-child as well as the psuedo elements on the 6th item. The below will need to be edited for your exact requirements, but will give you a good enough start to have a play.

HTML

<ul>
    <li>Menu Item</li>
    <li>Menu Item</li>
    <li>Menu Item</li>
    <li>Menu Item</li>
    <li>Menu Item</li>
    <li>Menu Item</li>
    <li>Menu Item</li>
    <li>Menu Item</li>
    <li>Menu Item</li>
    <li>Menu Item</li>
    <li>Menu Item</li>
    <li>Menu Item</li>
</ul>

CSS

ul, li {
    list-style:none;
    margin:0;
    padding:0;
    overflow:hidden;
}
ul {
    word-wrap:nowrap;
    white-space:nowrap;
    font-size:0;
    position:relative;
    text-align:center;
}
li {
    display:inline-block;
    padding:5px;
    background:lightgrey;
    border:darkgrey;
    width:100px;
    overflow:hidden;
    text-align:center;
    font-size:14px;
}
li:nth-child(5):before {
    content:'<<';
    position:absolute;
    left:0;
}
li:nth-child(5):after {
    content:'>>';
    position:absolute;
    right:0;
}
li:nth-child(n+6) {
    display:none;   
}

Upvotes: 2

Related Questions