Bootstrap Snippet User Short Infos LIst using HTML CSS Javascript

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="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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="liste">
    <div class="user">
        <div class="panel panel-default menu 1">
            <div class="panel-body">
                Infos Markus
            </div>
        </div>
        <div onclick="ausfahren('1')" id="1" class="panel panel-default sub_menu">
            <div class="panel-body">
                <span class="glyphicon glyphicon-user">·</span>Markus
            </div>
        </div>
    </div>
    <div class="user">
        <div class="panel panel-default menu 2">
            <div class="panel-body">
                Infos Christian
            </div>
        </div>
        <div onclick="ausfahren('2')" id="2" class="panel panel-default sub_menu">
            <div class="panel-body">
                <span class="glyphicon glyphicon-user">·</span>Christian
            </div>
        </div>
    </div>
    <div class="user">
        <div class="panel panel-default menu 3">
            <div class="panel-body">
                Infos Peter
            </div>
        </div>
        <div onclick="ausfahren('3')" id="3" class="panel panel-default sub_menu">
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
    .liste {
        position: absolute;
        top: 0;
        left: 0;
        height:100%;
        background-color:grey;
    }
    .user {
        margin: 5px;
        position: relative;
        width:100%;
    }
    .menu {
        z-index:2;
        width:100px;
        height:60px;
    }
    .sub_menu {
        position: absolute;
        top:0px;
        left:0px;
        z-index:1;
        width:100px;
        height:60px;
        cursor:pointer;
    }
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
29
30
31
32
33
34
35
36
37
function ausfahren (id) {
    var object=document.getElementById(id);
    var objectclass=document.getElementsByClassName(id);
    if ($( object ).hasClass( "active" ) == true) {
        $( object ).animate({
            position: "absolute",
            left: "0px",
            top: "0px",
            height: "60px",
            width: "100px"
        }, 500, function() {
            $( object ).removeClass( "active" );
        });
        $( objectclass ).animate({
            position: "absolute",
            left: "0px",
            top: "0px",
            height: "60px",
            width: "100px"
        }, 500, function() {
        });
    } else {
        $( object ).animate({
            position: "absolute",
            left: "200px",
            top: "0px",
            height: "60px",
            width: "100px"
        }, 500, function() {
            $( object ).addClass( "active" );
        });
        $( objectclass ).animate({
            position: "absolute",
            left: "0px",
            top: "0px",
            height: "60px",
            width: "200px"
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"User Short Infos LIst"
Bootstrap 3.1.0 Snippet by MarkusN99

Related: See More

Questions / Comments:

"User Short Infos LIst" Bootstrap 3.1.0 Snippet by MarkusN99

Related: See More

Questions / Comments:

"User Short Infos LIst"
Bootstrap 3.1.0 Snippet by MarkusN99