HTML Flaggen Menü JQuery (flaggs dropdown css menu)

Gepostet am Januar 23, 2014

Das folgende Beispiel zeigt eine Dropdown-Menü welches das Umschalten von Länderflaggen oder Sprachen demonstriert. Im folgenden Beispiel werden verschiedene Container ein und ausgeblendet, nach Auswahl des entsprechenden Landes. Der folgende Quellcode kann einfach in dein html Datei kopiert werden und das Flaggen-Bild muss in des selben Ordner.

Das benötigte Bild:

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<!-- ####################### HTML CODE ############################ -->

<div class="flags">
    <div class="fselection">
        <div class="fcurrent"></div>
        <ul class="foptions">
            <li id="seti_de"><div style="background-position:-27px -0px;" class="fl">&nbsp;</div><div class="te">Deutschland</div></li>
            <li id="seti_at"><div style="background-position:-48px -0px;" class="fl">&nbsp;</div><div class="te">Österreich</div></li>
            <li id="seti_ch"><div style="background-position:-69px -0px;" class="fl">&nbsp;</div><div class="te">Schweiz</div></li>
        </ul>
    </div>
</div>
 
<div class="contactinfo de">
    <span class="label">HOTLINE</span><span class="info">0800 / 77777777 (Mo-Sa 8-22 Uhr)</span>
</div>
 
<div class="contactinfo at" style="display:none;">
    <span class="label">HOTLINE</span><span class="info">+49 (0) 341 / 99999999 (8-22 Uhr) </span>
</div>
 
<div class="contactinfo ch" style="display:none;">
    <span class="label">HOTLINE</span><span class="info">+49 (0) 341 / 888888888 (8-22 Uhr)</span>
</div>
 
<div class="clearer"></div>
 
 
<!-- ####################### CSS CODE ############################ -->

<style>
.clearer {
    clear:both;
}
 
.flags { width: 38px; height: 18px; padding: 3px 0 0 0; background:url('flags.png') no-repeat -95px -2px transparent; float:left; }
.flags .fselection { position:relative; }
.flags .fcurrent { width:20px; height:15px; margin-left:3px; background:url('flags.png') no-repeat -27px -2px transparent; }
.flags .foptions { position:absolute; top:17px; left:-99999px; z-index: 100; padding:0; margin:0; border:1px solid #d5d5d5; }
.flags:hover .foptions { left:0px; }
.flags .foptions li { list-style: none; background: #fff; padding:2px 2px 2px 2px; width:150px; height:20px; clear:both; cursor: pointer; }
.flags .foptions li:hover { background: #F4F4F4; }
.flags .foptions li div.fl { display:block; background:url('flags.png') no-repeat 0 0 transparent; width:20px; height:17px; float:left; }
.flags .foptions li div.te { color:#2f2f2f; display:block; float:left; padding-left:8px; text-decoration: none; }
</style>
 
 
<!-- ####################### JQUERY CODE ############################ -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
 
 
<script type="text/javascript">
 
    function setContent(lang) {
        jQuery('.contactinfo').each(function() {
            jQuery(this).hide();
        });
        jQuery('.contactinfo.'+lang).each(function() {
            jQuery(this).show();
        });
    }
 
    jQuery(document).ready(function() {
 
        jQuery('.flags').mouseover(function() {
            jQuery('.flags .foptions').show();
        });
 
        jQuery('#seti_de').click(function() {
            setContent('de');
            jQuery('.flags .fcurrent').css('background-position','-27px -2px');
            jQuery('.flags .foptions').hide();
        });
        jQuery('#seti_at').click(function() {
            setContent('at');
            jQuery('.flags .fcurrent').css('background-position','-48px -2px');
            jQuery('.flags .foptions').hide();
        });
        jQuery('#seti_ch').click(function() {
            setContent('ch');
            jQuery('.flags .fcurrent').css('background-position','-69px -2px');
            jQuery('.flags .foptions').hide();
        });
    });
 
</script>

Tags:

Leave a Reply

 

Posts of Current Category



Facebook: