HTMLとCSSのスタイリング言語選択ボタン

-3

私のウェブサイトの言語選択ボタンをスタイルしたいと思います。これは、それがどのように見えるかの設計である：HTMLとCSSのスタイリング言語選択ボタン

私はどのように私はそれを達成することができますブートストラップ3

を使用していますか？どんな助けもありがとう！

EDIT

CSS + jQueryのを使用してカスタムのドロップダウンメニューを作成することによって、それを解決し、以下の結果を参照してください。

2016-09-27 lkallas

質問はスタックのためにオフトピックですオピニオンレスポンスやスパムを引きつける傾向があるため、オーバーフローします。代わりに、[問題を説明してください]（http://meta.stackoverflow.com/questions/254393/what-exactly-is-a-recommendation-question）、それを解決するために今まで何が行われましたか。 – Frits

http://www.tutorialrep.com/codelab.php?topic=faq&file=custom-select-box –

あなたはブートストラップ3を使用していると言いました。あなたのコードはどこですか？あなた自身の努力を示して助けを求めてください。 – stfsngue

多くの無駄なコメントとダウンボートがありました。役に立たないコメントにも同様にdownvoteオプションが必要です。

少なくとも、いくつかのアドバイスをすることが役に立ちました。

しかし、とにかくは私の問題がにソートされました。ここで

<!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>

は、私は現在で満足している結果だ：書籍、ツール、ソフトウェアライブラリ、__tutorial__または他のオフサイトのリソースをお勧めしますか見つけるために私たちを求めて https://jsfiddle.net/manb0hzh/

出典

2016-09-29 09:56:14 lkallas

HTMLとCSSのスタイリング言語選択ボタン

答えて

関連する問題