Bootstrap Snippet Menu multilanguage using HTML CSS jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
    <div class="row">
        <h1 class="text-center">Mehrsprachiges Menü</h1>
<nav class="navbar navbar-default">
  <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
    <ul class=" pull-left langswitch"  >
        <li class="deu"><a href="#" class="language" rel="de-DE"><img src="images/de.png" alt="Deutsch"  width="40"/></a></li>
        <li class="eng"><a href="#" class="language" rel="en-US"><img src="images/gb.png" alt="English" width="40"/></a></li>
        <li class="ita"><a href="#" class="language" rel="it-IT"><img src="images/it.png" alt="Italiano" width="40"/></a></li>
        <li><a href="/rss.xml"><img src="images/rss.png"  alt="RSS" width="40"></a></li>
                                
      </ul>
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
    </div>
    
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <!-- Deutsch -->
      <div class="multi-lang animated fadeInDown" >
      <ul class="nav navbar-nav" id="deutsch">
        <li><a href="#news" class="active">Neues</a></li>
        <li><a href="#genealogy">Genealogie</a></li>
                <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown<span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Aktion </a></li>
            <li><a href="#">andere Aktion</a></li>
          </ul>
        </li>
        <li><a href="#photos">Fotos</a></li>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
#english{
    display:none;
}
#italo{
    display:none;
}
.langswitch>li{
        display: none;
}
textarea{
    width:100%;
    height:500px;
    }
@media (max-width: 767px) {
    .navbar-right{
        display:none;
        }
    #english {
        top: 60px;
    }
    #italo {
        top: 60px;
    }
    .langswitch>li{
        display: inline;
        padding-right:10px;
    }
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
var animationsname = "animated fadeInDown"; 
$(document).ready(function () {
    "use strict";
    $(".eng").click(function () {
            $("#english").css("display", "inline");
            $("#english").addClass(animationsname);
            $("#deutsch").css("display", "none");
            $("#italo").css("display", "none");
    });
    $(".deu").click(function () {
            $("#deutsch").css("display", "inline");
            $("#deutsch").addClass(animationsname);
            $("#italo").css("display", "none");
            $("#english").css("display", "none");
            
    });
    $(".ita").click(function () {
            $("#italo").css("display", "inline");
            $("#italo").addClass(animationsname);
            $("#english").css("display", "none");
            $("#deutsch").css("display", "none");
            
    });
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Menu multilanguage"
Bootstrap 3.3.0 Snippet by Friedeburger

Related: See More

Questions / Comments:

"Menu multilanguage" Bootstrap 3.3.0 Snippet by Friedeburger

Related: See More

Questions / Comments:

"Menu multilanguage"
Bootstrap 3.3.0 Snippet by Friedeburger