0
I’m trying to create a menu with the following features:
- Horizontal with scroll
- Running via mobile touch/scroll.
- Leave the mid div option selected, with a Javascript/Jquery event (or a div inside a container with link)
- Featured middle Div image (larger) Similar to the video game menus, where the options go horizontally. Only with scroll from mobile devices.
I try to think of some javascript effect, jquery, example code on the internet, but I can’t get anything conclusive. I tried something using Jquery Mobile Swipe, CSS with overflow-x: scroll, but I can’t think of any event to select the middle menu option, or leave the middle div with larger image (using the device touch of course, not the mouse).
Here’s 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>
<script src="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>