Lösungen ,glocke html

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>