CODEWITHSUNDEEP
htmlcssselectbutton
lkallas
lkallas

Reputation: 1406

Styling language select button in html and css

I would like to style a language select button for my website. This is the design of what it should look like:

Language select button

I am using Bootstrap 3.

How can I achieve that? Any help is appreciated!

EDIT

Solved it by creating a custom dropdown using css+jquery, see the result below.

Upvotes: 1

Views: 25976

Answers (1)

lkallas
lkallas

Reputation: 1406

There were many useless comments and downvotes. Useless comments should have downvote option as well.

At least giving some advice would have been helpful.

But anyway, got my problem sorted. 

<!DOCTYPE html>
<html>
    <head>
        <title>Custom dropdown</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <!-- Font Awesome CSS -->
        <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">        
        <!-- Latest compiled and minified Bootstrap CSS -->
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <!-- jQuery library -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <!-- Latest compiled Bootstrap JavaScript -->
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <!-- Google font -->
        <link href="https://fonts.googleapis.com/css?family=Raleway|Rancho" rel="stylesheet">

        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
          <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->

        <style>

            /* Custom dropdown */
            .custom-sel a {
                text-decoration: none;
                text-transform: uppercase;
                margin: 0;
                padding: 10px;
                text-align: left;
                font-family: Raleway;
                color: #546e7a;
                font-size: 15px;
                font-weight: 700;
                line-height: 24px;
                display: block;
            }

            .custom-sel a:hover {
                text-decoration: none;
                background-color: #EDF0F2;
                color: #ffffff;
            }

            .custom-sel a.selected {
                background-color: transparent;
            }

            .custom-sel a.selected:hover {
                background-color: transparent;
                color: #546e7a;
            }

            .hidden {
                display: none;
            }

            .lightblue {
                color:#03a9f4;
                margin-left: -4px;
            }

            .show-sel {
                background-color: #ffffff;
                box-shadow: -5px 0px 65px 0px rgba(0, 0, 0, 0.18);
            }

            .custom-sel {
                margin: 30px;
                display: inline-block;
            }
            /* Custom dropdown */

        </style>

        <script type="text/javascript">

            $(document).ready(function () {

                // Show dropdown
                $('.selected').click(function () {
                    $('.custom-sel').addClass('show-sel');
                    $('.custom-sel a').removeClass('hidden');
                });

                // Hide dropdown when not focused
                $('.custom-sel').focusout(function () {
                    $('.custom-sel').removeClass('show-sel');
                    $('.custom-sel a:not(:first)').addClass('hidden');
                }).blur(function () {
                    $('.custom-sel').removeClass('show-sel');
                    $('.custom-sel a:not(:first)').addClass('hidden');
                });

            });

        </script>

    </head>
    <body>
        <div class="container">

            <!-- Custom dropdown -->
            <div class="custom-sel">
                <a class="selected" href="#">ENG &nbsp;<i class="fa fa-caret-down lightblue" aria-hidden="true"></i></a>
                <a class="hidden" href="#">EST</a>
                <a class="hidden" href="#">RUS</a>
                <a class="hidden" href="#">FIN</a>
            </div>

        </div>
    </body>
</html>

Here's the result I'm currently happy with: https://jsfiddle.net/manb0hzh/

Upvotes: 7

Related Questions