glocke.html
Quell Code
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
ul {
margin: 0;
padding: 0;
list-style: none
}
.navigation {
width: 150px;
background-color:#123456;
height: 46px;
padding: 0 20px
}
.navigation > li > a {
color: #FFF;
text-decoration: none
}
.navigation .menu {
position: relative
}
.navigation .menu .submenu {
position: absolute;
top: 42px;
left: 0;
width: 220px;
background-color: red;
padding: 10px;
transition: all .5s ease-in-out;
display: none;
padding:30px;
}
.navigation .menu .submenu li a {
color: #777;
text-decoration: none
}
.navigation .menu .submenu li a:hover {
color: #F00
}
.menu:hover .submenu {
display: block
}
.navigation img{
height:44px;
margin-top:1px;
}
#zahl{
height:44px;
width:44px;
background:green;
font-size:30px;
border-radius:50%;
display:inline-block;
border:1px solid black;
color:red;
padding-left:10px;
}
#beides{
display:flex;
}
</style>
</head>
<body>
<ul class="navigation">
<li class="menu">
<a href="#"> <span id="beides">
<span id="glocke">
<img src="https://vignette.wikia.nocookie.net/howrsewiki/images/e/e8/Glocke.png/revision/latest?cb=20151210133309"></span>
<span id="helferzahl">
<span id="zahl"><p></p></span>
</span></span></a>
<ul class="submenu">
</ul>
</li>
</ul>
<script>
auswahli=['kino','neuigkeiten','info','email'];
var zahl1='0';
go(auswahli,zahl1);
function go(auswahli,zahl1){
lis='';
menge=auswahli.length-zahl1;
if(menge>=1){
$('#zahl').html(menge);
if(menge>0){
for(a=0;a<=menge-1;a++){
lis+='<li class="lieds" id="sms'+a+'">'+auswahli[a]+'</li>';
}
}else{
lis="Keine Nachrichten";
}
$('.submenu').html(lis);
}else{
$('#zahl').css('display','none') ;
$('a+ul').css('display','none');
}
$('.lieds').click(function(){
$(this.id).remove();
zahl1++;
go(auswahli,zahl1);
})
}
/*
gg1=$('.menu>ul>li');
gg=gg1.length;
alert(gg)
*/
</script>
</body>
</html>