Creating Menu with Search box using LESS CSS

Posted by Krishna Vamshi Goud in CSS 3 category on 5/21/2014 for Beginner level | Points: 250 | Views : 6405

Post Article |

Search Articles |

Articles Home

Menus are very important to a web application which lead user easy to navigate different sections of entire website. Lets Create a cool Menu including a search box in it using Less CSS.

Recommendation
Read Working with Nested Rules, Operators and Functions in LESS before this article.

Introduction

So far we have seen creating menus in different styles using CSS. Now lets create a simple menu like below easily with a search box using Less CSS technology.

Using the code

View Page

In your aspx page, take a nav section in which describe your menu items like below.

<body>
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Videos</a></li>
            <li><a href="#">Drawings</a></li>
            <li><a href="#">Quizzes</a></li>
            <li><a href="#">Schools</a></li>
            <li><a href="#">About</a></li>
            <li>
                <input class="search" type="text" width="100" />
                <input type="button" class="searchButton" value="Search" />
            </li>
        </ul>
    </nav>
</body>

In the above code, Here we have used input type to create a search box inside the menu. Instead of '#', you can give your redirecting Url's.

Less StyleSheet

Here, we have taken @menu as the default theme color.

@menu: yellowgreen;

Now., create different type of mixins(class selectors which are reusable) as below for beautifying the menu.

.menuShadow {  
    box-shadow: 0 1px 2px 0 @menu;  
}

.menuBorder(@radius:5px) {  
    border-radius: @radius;  
    border: 2px solid @menu - #111;  
}

.itemDivider {  
    border-style: solid;  
    border-width: 0 2px 0 0px;  
    border-color: transparent @menu - #111 transparent @menu + #333;  
}

.halfEffect {  
    background: -webkit-linear-gradient(top, @menu + #212121 0%, @menu + #141414 50%, @menu - #000000 51%, @menu + #121212 100%);  
}  
.menuHover {  
    background: -webkit-linear-gradient(top, @menu - #010101 0%, @menu - #050505 50%, @menu - #121212 51%, @menu - #080808 100%);  
}

.txtcolor(@txtcolor) when (lightness(@txtcolor) >= 50%) {  
    color: @txtcolor;  
    text-shadow: 1px 1px 0px #00ccff;  
}

.txtcolor(@txtcolor) when (lightness(@txtcolor) < 50%) {  
    color: @txtcolor;  
    text-shadow: 1px 1px 0px #00ccff;  
}

In the above code, different mixins are taken for different perspectives such as .menuShadow(for getting shadow), .menuBorder(for entire border), .itemDivider(lines in between menu items), .halfEffect(for gradient effects), .menuHover(for hover effect on menu items) and .txtcolor(a parametric mixin).

Now, Give styles for your body and item fonts as below,

@font-face {  
    font-family: 'Segoe UI';    
    font-weight: normal;  
    font-style: normal;  
}

body {  
    background: lighten(@menu, 30%);  
    font-family: AsapRegular, sans-serif;  
    font-size: 11pt;  
}

Then Create a final style for your menu by using nested technique of Less as below.

nav {  
    margin: 40px auto 0;  
    width: 1134px;  
    height: 35px;  
    .menuBorder;  
    .menuShadow;  
        ul {  
            padding: 0;  
            margin: 0;  
            li {  
                display: inline;  
                a {  
                    text-decoration: none;  
                    display: inline-block;  
                    float: left;  
                    width: 150px;  
                    height: 35px;  
                    text-align: center;  
                    line-height: 250%;  
                    .txtcolor(#0054ff); // You can change this line  
                    .itemDivider;  
                    .halfEffect;  
                    &:hover {  
                        .menuHover;  
                    } 
                }  
            }  
            li:first-child a {  
                border-left: none;  
            }  
            li:last-child a {  
                border-right: none;  
            }  
            .halfEffect;
        }  
    }

In the above code if you observe, we have used all our mixins to achieve our final menu. This is all for creating menu.

At last, give certain styles for the search box in the menu to make it good look and feel.

.search 
{
    margin:6px; 
    background-color: lighten(@menu, 30%);
}
.searchButton
{
    padding:0;
    background-color: @menu;
    color: @menu - #16f;
    font-family:'Segoe UI';
    width:50px;
    text-shadow:none;
}

Output

Change the @menu colour in the top and see the Magic.. Thats why 'LESS is MORE'.

Conclusion

In this article we have seen creating a simple menu for the website easily using Less CSS technology. Hope you understand and enjoyed it. We will cover more about Less in upcoming chapters.

Thanks for reading, do refer www.dotnetfunda.com to your friend and colleague.

About the Author

Full Name: Krishna Vamshi Goud
Member Level: Gold
Member Status: Member,MVP
Member Since: 2/12/2014 2:34:09 AM
Country: India
Thanks & Regards, Krishna

Bookmark It

Login to vote for this post.

Latest Articles

Comments or Responses

Comment using

(Author doesn't get notification)