I'm trying to create a menu with the following features:
- Horizontal with scroll
- Working through touch / scroll of mobile devices.
- Leave the middle of the div selected with a JavaScript / Jquery event (or a div within a linked container)
- Div image of the middle highlighted (major) Similar to the video game menus, where the options go to the side horizontally. Only with scrolling mobile devices.
I try to think of some javascript effect, Jquery, example code on the internet, but I can not get anything conclusive. I tried something using Swipe from Jquery Mobile, CSS with overflow-x: scroll, but I can not think of any event to select the middle menu option, or leave the middle div with larger image (using the touch of the device of course not the mouse).
Here is my code with my attempts:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script><scriptsrc="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script>
<script src="frameJS/deslizante.js"></script>
<style type="text/css">
body {
overflow-x: scroll;
}
.produtos {
position: fixed;
top: 20px;
z-index: 1;
}
.scroll {
opacity: 0.3;
z-index: 2;
position: fixed;
}
#mover {
position: fixed;
bottom: 30px;
}
#elementoEsquerda {
left: 10px;
}
#elementoCentral {
margin-left: 50%;
}
#elementoDireita {
right: 10px;
}
#caixaDeslizante {
height: 300px;
width: 450px;
overflow-x: auto;
white-space: nowrap;
}
.container {
width: 100%;
border-color: blue;
text-align: center;
left: -50%;
}
.botaoComprar {
position: relative;
width: 100px;
height: 20px;
top: 180px;
background-color: blue;
border-style: solid;
border-color: green;
}
.produto {
display: inline-block;
width: 100px;
height: 200px;
margin: 10px 20px;
border-style: solid;
border-color: green;
}
#produto-1 {
background-color: rgba(255, 0, 0, 0);
}
#produto-2 {
background-color: green;
}
#produto-3 {
background-color: pink;
}
#produto-4 {
background-color: #ccc;
}
#produto-5 {
background-color: #000;
}
#produto-6 {
background-color: pink;
}
#produto-7 {
background-color: pink;
}
#produto-8 {
background-color: pink;
}
#produto-9 {
background-color: pink;
}
#produto-10 {
background-color: pink;
}
</style>
<script type="text/javascript">
$.mobile.changePage("hinoNac");
function mudaLink() {
document.location.href = "homeFrame.html";
}
</script>
</head>
<body>
<div data-role="page" id="pageone" style="background-color: #ffffff;">
<div data-role="main" class="ui-content" id="deslizante" style="background-color: #ffffff;">
<div id="alvo">
<div id="objeto" style="position: fixed; top: 0px; left: 10px;">Objeto</div>
</div>
<div id="caixaDeslizante">
<div id="deslizante" class="container">
<canvas style="background-color: #ccc; width: 100%; height: 90px;" id="deslizante" class="scroll"></canvas>
<div id="produto-1" class="produto">1
<div class="botaoComprar"></div>
</div>
<div id="produto-2" class="produto">2
<div class="botaoComprar"></div>
</div>
<div id="produto-3" class="produto">3
<div class="botaoComprar"></div>
</div>
<div id="produto-4" class="produto">4
<div class="botaoComprar"></div>
</div>
<div id="produto-5" class="produto">5
<div class="botaoComprar"></div>
</div>
<div id="produto-6" class="produto">6
<div class="botaoComprar"></div>
</div>
<div id="produto-7" class="produto">7
<div class="botaoComprar"></div>
</div>
<div id="produto-8" class="produto">8
<div class="botaoComprar"></div>
</div>
<div id="produto-9" class="produto">9
<div class="botaoComprar"></div>
</div>
</div>
</div>
</body>
</html>