So i would like to create a dropdown menu like this(with thumbnails). I have 5 html elements that i would like to show in that style. I added my code but i have no idea how to make a dropdown menu in that style.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript">
window.onload = function(){
var c=document.getElementById("leplanner-canvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(0, c.height/2);
ctx.lineTo(c.width, c.height/2);
ctx.stroke();
for(var i =0; i< document.getElementsByClassName('box').length; i++){
var box = ".box-"+i;
console.log(i);
$(box).draggable({
grid: [ 72, 12 ],
stop: function( event, ui ) {
console.log('dragstart');
},
stop: function( event, ui ) {
var json = [];
for(var i =0; i< document.getElementsByClassName('box').length; i++){
var b = {
x: document.getElementsByClassName('box')[i].offsetLeft,
y: document.getElementsByClassName('box')[i].offsetTop
/// see asendada koordinaatidega võrreldes canvasega + juurde veel laius ja muu
////http://stackoverflow.com/questions/288699/get-the-position-of-a-div-span-tag
}
json.push(b);
}
//See on see mis ab'i siis läheb
document.getElementsByClassName('json')[0].innerHTML = JSON.stringify(json, null, 2);
},
drag: function( event, ui ) {
//http://api.jqueryui.com/draggable/#event-drag
// siin või jquery ui kaudu tuleks kontrollida, et ei saaks kaste üksteise peale panna
}
});
$(box).resizable({
grid: [ 72, 12 ]
});
}
}
</script>body,html {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
position: center;
}
.box {
height: 71px;
width: 71px;
margin: 5px;
border: 1px solid gray;
text-align: center;
background-color: #fff;
z-index: 20;
display: inline-block;
}
#leplanner-canvas {
background-color: lightgray;
margin: 0 auto;
position: absolute;
left: 50%;
margin-left: -480px;
z-index: 10;
}
.list {
padding-left:450px;
margin-top: 20px;
margin-left: 190px;
position: float-right:
height: 100px;
width: 10%:
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>LePlanner</title>
<style media="screen">
</style>
</head>
<body>
<div class="list">
<div class="box box-0">
Tekst
</div>
<div class="box box-1">
Youtube
</div>
<div class="box box-2">
Twitter
</div>
<div class="box box-3">
Facebook
</div>
<div class="box box-4">
Google
</div>
<div class="box box-5">
Meetod
</div>
</div>
<canvas id="leplanner-canvas" width="960" height="400"></canvas>
<div class="json"></div>
</body>
</html>
