In IE or Firefox the site works like this (IE11):
(Tabs are clickable)
but not in chrome. Click on tabs not get fired. I tried to reveal element in Developer Tools, but it reveals #container element instead of the lielement I clicked on.
It looks like the layering of the elements are not the same as you see it and when you raise an event (ex.: click). The first/parent div is the top element and the tabs (li) are nested behind.
Why is it working in IE and Firefox, and why does not in Chrome? What is the differecnce?
$('button').click(function() {
$('.box').toggleClass('flipped');
})
$('li').click(function() {
var text = 'You selected ' + $(this).html();
alert(text);
});
* {
margin: 0;
padding: 0
}
button {
position: fixed;
right: 5px;
bottom: 5px;
}
.box {
position: relative;
width: 300px;
height: 300px;
transform-origin: right center;
transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
transition: all 300ms, transform 500ms ease;
}
.box figure {
position: absolute;
width: 100%;
height: 100%;
transition: visibility 0s ease 140ms;
}
.box:not(.flipped) figure.back {
visibility: hidden;
}
.box.flipped {
transform: translateX(-100%) rotateY(-180deg);
}
.box .front {
background-color: skyblue;
}
.box .back {
transform: rotateY(180deg);
background-color: lightgreen;
}
.box .back .nav {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 32px;
width: 100%;
background-color: skyblue;
text-align: center;
}
.box .back .nav li {
background-color: white;
width: 24%;
display: inline-block;
height: 30px;
line-height: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div class='box'>
<figure class='front'>
<p>FRONT SIDE</p>
</figure>
<figure class='back'>
<ul class='nav'>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
</ul>
<div class='content'>
<p>BACK SIDE</p>
</div>
</figure>
</div>
</div>
<button>FLIP</button>
Thanks in advance for any help!
To be 100% saint with your work, wrap your JS code in
$(document).ready(function(){ ... })
Secondly I would not advise to use such big qualifiers $('li'). This will scan every list element in DOM tree-slow and not advised. Here you are interested in list elements from menu only.
I would also find Flip button by id, you have only one button, so it doesn't cost much:)
I would propose something like this :
var navContainer = $('.box > figure.back > ul.nav');
navContainer.on('click', 'li', function(){ ... })
This code should work, even when you add more li items to DOM.
Secondly you could in debug mode find, if this navContainer has been found or not.
I found a workaround for my problem. If I set z-index: 0 and position: relative to body and the body > div then clicks get fired.
SOLUTION : CSS
body, body > div { position: relative; z-index: 0; }
$('button, .front').click(function() {
$('.box').toggleClass('flipped');
})
$('li').click(function() {
var text = 'You selected ' + $(this).html();
alert(text);
});
/*Workaround*/
body,
body > div {
position: relative;
z-index: 0;
}
/************/
* {
margin: 0;
padding: 0
}
button {
position: fixed;
right: 5px;
bottom: 5px;
}
.box {
position: relative;
width: 300px;
height: 300px;
transform-origin: right center;
transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
transition: all 300ms, transform 500ms ease;
}
.box figure {
position: absolute;
width: 100%;
height: 100%;
transition: visibility 0s ease 140ms;
}
.box:not(.flipped) figure.back {
visibility: hidden;
}
.box.flipped {
transform: translateX(-100%) rotateY(-180deg);
}
.box .front {
background-color: skyblue;
}
.box .back {
transform: rotateY(180deg);
background-color: lightgreen;
}
.box .back .nav {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 32px;
width: 100%;
background-color: skyblue;
text-align: center;
}
.box .back .nav li {
background-color: white;
width: 24%;
display: inline-block;
height: 30px;
line-height: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='container'>
<div class='box'>
<figure class='front'>
<p>FRONT SIDE</p>
</figure>
<figure class='back'>
<ul class='nav'>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
</ul>
<div class='content'>
<p>BACK SIDE</p>
</div>
</figure>
</div>
</div>
<button>FLIP</button>
Related
I've never used Javascript and I've only been programming for less than a year, so please don't blame me if I did something stupid. My question is, how do I close the sidebar when a button is clicked? I guess I should make it in Javascript but I don't know how.
Here is my JS code:
function show(){
document.getElementById('sidebar').classList.toggle('active')
document.getElementById('sidebarbg').classList.toggle('active')
}
CSS code (that's not the full css code obviously, I deleted the most) :
#sidebar{
background-color: #cc2f70;
width: 310px;
height: 100%;
position: fixed;
left: -310px;
transition-duration: 0.3s;
}
#sidebarbg{
background-color: #00a6b7;
width: 300px;
height: 100%;
position: fixed;
left: -300px;
transition-delay: 0.15s;
transition-duration: 0.3s;
}
#sidebar.active{
left: 0;
}
#sidebarbg.active{
left: 0;
}
#sidebar ul{
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.button{
position: fixed;
top: 30px;
left: 220px;
z-index: 5;
transition: 0.4s;
}
.button span{
width: 30px;
height: 5px;
background-color: white;
display: block;
margin: 5px;
}
html:
<div class="button" onclick="show()">
<span>click here</span>
<span></span>
<span></span>
</div>
<div class="logo">
<span>lo</span><br><span>go</span>
</div>
<div id="sidebar">
<div id="sidebarbg"></div>
<ul>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</div>
add this script
var lis = document.querySelectorAll("ul li");
for (var i = 0; i < lis.length; i++) {
lis[i].addEventListener("click", show);
}
i am trying to animate when i hover a li.. background image will be the zoom out
$(function () {
var image = $('.menu').find('img').attr('src');
$('.menu ul li').mouseover(function () {
var currentImage = $(this).attr('data-img');
$(this).parent().parent().parent().parent().find('img').attr('src', currentImage); })});
::-webkit-scrollbar{display: none; visibility: hidden;}
body{margin: 0; background: burlywood; }
.menu { position: relative; text-align: center; margin: auto; height: 100%; padding-top: 2%; padding-bottom: 10%; z-index: 99;}
.menu li{ display: block; font-size: 1.5rem; font-family: "Raleway SemiBold", Serif, sans-serif; padding-bottom: 20px;}
.menu li+li{margin-top: 30px;}
.menu a{ font-size: 3.5rem;}
.navigationGif{ position: fixed; top: 0; bottom: 0; left: 0; right: 0; animation: menuBG 0.7s ease-in;}
.homeGif{ position: fixed;}
.menu img{ width: 100%; }
#keyframes menuBG { from{ opacity: 0; transform: scale(1.05); }}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu">
<div class="navigationGif">
<div class=""> <img src="https://images.unsplash.com/photo-1532109513327-3b32b2a9bd57?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" alt="" class="src"> </div> </div>
<div class="menu"> <div class="data"><ul>
<li>Navigation</li>
<li data-img="https://images.unsplash.com/photo-1532109513327-3b32b2a9bd57?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" class="navLink home active"><span>H</span><span>o</span><span>m</span><span>e</span></li>
<li data-img="https://images.unsplash.com/photo-1589986118236-64c32953ab27?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" class="navLink works">Works</li>
<li data-img="https://images.unsplash.com/photo-1589892889837-e0236f8dd22e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=753&q=80" class="navLink about">About</li>
<li data-img="https://images.unsplash.com/photo-1558567083-b8cb6bb5f7d9?ixlib=rb-1.2.1&auto=format&fit=crop&w=763&q=80" class="navLink contact">Contact</li></ul> </div></div></div>
Try to reset the animation, also avoid too many parent() call as possible by select closest element or create better class names.
So here I make a small modification to get what you need, by add a class name to the background img that trigger animation, every time you change the hover to other menu item (LI element) it will toggle the class name so the animation will restart each time.
$(function () {
var image = $('.menu').find('img').attr('src');
var lastImage
$('.menu ul li.navLink').mouseover(function () {
var currentImage = $(this).attr('data-img');
$('.navigationGif img').attr('src', currentImage);
if(lastImage !== currentImage) {
$('.navigationGif').removeClass('animation')
setTimeout(() => {
$('.navigationGif').addClass('animation')
}, 10);
lastImage = currentImage
}
})
});
::-webkit-scrollbar {
display: none;
visibility: hidden;
}
body {
margin: 0;
background: burlywood;
}
.menu {
position: relative;
text-align: center;
margin: auto;
height: 100%;
padding-top: 2%;
padding-bottom: 10%;
z-index: 99;
}
.menu li {
display: block;
font-size: 1.5rem;
font-family: "Raleway SemiBold", Serif, sans-serif;
padding-bottom: 20px;
}
.menu li+li {
margin-top: 30px;
}
.menu a {
font-size: 3.5rem;
}
.navigationGif {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.navigationGif.animation {
animation: menuBG 0.7s ease-in;
}
.homeGif {
position: fixed;
}
.menu img {
width: 100%;
}
#keyframes menuBG {
from {
opacity: 0;
transform: scale(1.05);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu">
<div class="navigationGif animation">
<div class=""> <img
src="https://images.unsplash.com/photo-1532109513327-3b32b2a9bd57?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80"
alt="" class="src"> </div>
</div>
<div class="menu">
<div class="data">
<ul>
<li>Navigation</li>
<li
data-img="https://images.unsplash.com/photo-1532109513327-3b32b2a9bd57?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80"
class="navLink home active"><a href=""
class="navItem"><span>H</span><span>o</span><span>m</span><span>e</span></a></li>
<li
data-img="https://images.unsplash.com/photo-1589986118236-64c32953ab27?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80"
class="navLink works">Works</li>
<li
data-img="https://images.unsplash.com/photo-1589892889837-e0236f8dd22e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=753&q=80"
class="navLink about">About</li>
<li
data-img="https://images.unsplash.com/photo-1558567083-b8cb6bb5f7d9?ixlib=rb-1.2.1&auto=format&fit=crop&w=763&q=80"
class="navLink contact">Contact</li>
</ul>
</div>
</div>
</div>
I am working on a project for an upcoming exhibition and need your help with some of the script. I used jQuery to implement a transition on click for the images and it works really well.
Now I want to implement some kind of lightbox gallery which enlarges the images on a second click on a specific image. Afterwards, when clicked anywhere but the enlarged image the lightbox gallery should close. All I know it that I need another onClick event in jQuery... but honestly I am pretty lost!
I hope someone can help me here.
This is the code I use right now:
jQuery(document).ready(function($){
$('ul.cards').on('click', function(){
$(this).toggleClass('transition');
});
});
ul.cards{
width: 1500px; margin: 0 auto 20px;
height: 450px;
list-style-type: none;
position: relative;
padding: 50px 0;
cursor: pointer;
li.title{ margin: 0 0 20px;
h2{ font-weight: 700; }
}
li.card{
background: #FFF; overflow: hidden;
height: 300px; width: 250px;
border-radius: 7.5px;
position: absolute; left: 0px;
box-shadow: 1px 2px 2px 0 #aaa;
transition: all 0.4s cubic-bezier(.63,.15,.03,1.12);
img{
max-width: 100%; height: auto;
}
div.content{
padding: 5px 10px;
h1{
}
p{
}
}
&.card-1{
z-index: 10; transform: rotateZ(-2deg);
}
&.card-2{
z-index: 9; transform: rotateZ(-7deg);
transition-delay: 0.05s;
}
&.card-3{
z-index: 8; transform: rotateZ(5deg);
transition-delay: 0.1s;
}
}
&.transition{
li.card{
transform: rotateZ(0deg);
&.card-1{
left: 560px;
}
&.card-2{
left: 280px;
}
&.card-3{
}
}
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="cards">
<li class="title">
<h2>Foncemagne, Étienne Lauréault</h2>
</li>
<li class="card card-1"><img src="https://digi.bib.uni-mannheim.de/fileadmin/digi/51044668X/max/51044668X_0001.jpg" />
</li>
<li class="card card-2"><img src="https://digi.bib.uni-mannheim.de/fileadmin/digi/510448682/max/510448682_0001.jpg" />
</li>
<li class="card card-3"><img src="https://digi.bib.uni-mannheim.de/fileadmin/digi/510449158/max/510449158_0001.jpg" />
</li>
</ul>
im not sure enough, but I just tried, maybe the meaning is more or less like this.
I change ul.card to double click, so that the image can also be clicked.
if you use second way maybe there will be less coding no need to use function if ($ ('li.card'). css ('transform', 'scale (1)')) on javascript,
but I can't use second way, maybe because it's css on element
.li there is have a transform property.
jQuery(document).ready(function($){
$('ul.cards').on('dblclick', function(){
$(this).toggleClass('transition');
$('li.card').css("transform","");
/* $('li.card').removeClass('transformation'); -- second way*/
$('li.card').off('click'); //delete the event listener click from li.card, so that when the collapsed cant be clicked
if ($('ul.cards').hasClass('transition')){
$('li.card').on('click', function(){
/* $(this).toggleClass('transformation');
-- second way */
if ($('li.card').css('transform','scale(1)'))
{
$(this).css('transform','scale(1.5)');
} else {
$(this).css('transform','scale(1)');
}
});
}
});
});
$(document).mouseup(function (e) { // when clicked anywhere the image close/back to default scale
if ($('ul.cards').hasClass('transition')){
if ($(e.target).closest('li.card').length
=== 0) {
$('li.card').css('transform','scale(1)');
}
}
});
ul.cards{
width: 1500px; margin: 0 auto 20px;
height: 450px;
list-style-type: none;
position: relative;
padding: 50px 0;
cursor: pointer;
li.title{ margin: 0 0 20px;
h2{ font-weight: 700; }
}
li.card{
background: #FFF; overflow: hidden;
height: 300px; width: 250px;
border-radius: 7.5px;
position: absolute; left: 0px;
box-shadow: 1px 2px 2px 0 #aaa;
transition: all 0.4s cubic-bezier(.63,.15,.03,1.12);
img{
max-width: 100%; height: auto;
}
div.content{
padding: 5px 10px;
h1{
}
p{
}
}
/* &.transformation {
transform: scale(1.5);
} -- second way */
&.card-1{
z-index: 10; transform: rotateZ(-2deg);
}
&.card-2{
z-index: 9; transform: rotateZ(-7deg);
transition-delay: 0.05s;
}
&.card-3{
z-index: 8; transform: rotateZ(5deg);
transition-delay: 0.1s;
}
}
&.transition{
li.card{
transform: rotateZ(0deg);
&.card-1{
left: 560px;
}
&.card-2{
left: 280px;
}
&.card-3{
}
}
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="cards" id="cardsParent">
<li class="title">
<h2>Foncemagne, Étienne Lauréault</h2>
</li>
<li id="card-1" class="card card-1"><img src="https://digi.bib.uni-mannheim.de/fileadmin/digi/51044668X/max/51044668X_0001.jpg" />
</li>
<li class="card card-2"><img src="https://digi.bib.uni-mannheim.de/fileadmin/digi/510448682/max/510448682_0001.jpg" />
</li>
<li class="card card-3"><img src="https://digi.bib.uni-mannheim.de/fileadmin/digi/510449158/max/510449158_0001.jpg" />
</li>
</ul>
<div style="height:100px;background-color:grey;color:white;text-align:center;">
click here or anywhere for close/change to default image
</div>
u can see in this link
https://jsfiddle.net/Lzp74drj/2/
I hope this is useful.
I'm working on trying to get a div to slide up from the bottom. So far it works ok as I can get the div to show and hide when I need to by adding a class of open-drawer to the element that I'm trying to get to slide up. But I'm not sure how I can get it to animate and slide up from the bottom.
Not sure if I need to adjust something within the transition or what.
Here's what I got so far:
$(".drawer-link").click(function(e) {
var vdata = $(this).data("id");
$(".drawer[data-id=" + vdata + "]").addClass("open-drawer");
e.preventDefault();
});
$(".close").on("click", function(e) {
$(".drawer").removeClass("open-drawer");
e.preventDefault();
});
body {
padding: 20px;
}
.drawer {
position: fixed;
height: 100%;
width: 100%;
left: 0;
background: #0c1f3f;
padding-top: 90px;
overflow-y: scroll;
transition: top 0.5s ease;
color: white;
opacity: 0;
}
.wrapper {
width: 100%;
max-width: 1140px;
margin: 0 auto;
}
.open-drawer {
top: 150px;
opacity: 1;
}
.close {
color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<a class="drawer-link" href="#" data-id="drawer-01">Link To Show Drawer</a>
</div>
<div class="drawer" data-id="drawer-01">
<div class="wrapper">
<h3>Test</h3>
<p>This is the drawer</p>
<a class="close" href="#">Close The Drawer</a>
</div>
</div>
Link to demo (CodePen): https://codepen.io/ultraloveninja/pen/qzVQLp
Three examples: jQuery, pure JS, and pure HTML+CSS
Toggle animate panel using jQuery and .toggleClass()
Use transform: translateY at 100% and on click the class .is-open will animate to 0.
No need for extra special classes, use what you already have, a data-*
attribute: data-drawer="#drawer-01" (notice the ID # selector!)
Also, make sure to use id="drawer-01" as the drawer selector.
Use jQuery's .toggleClass()
Animating transform is always a better idea than animating non-accelerable properties like top, bottom etc etc
$("[data-drawer]").on('click', function(e) {
e.preventDefault();
$($(this).data("drawer")).toggleClass("is-open");
});
.drawer {
position: fixed;
height: 100%;
width: 100%;
left: 0;
top: 0;
background: #0c1f3f;
overflow-y: scroll;
color: white;
/* Initial transforms */
opacity: 0;
transform: translateY(100%);
transition: 0.5s ease;
}
.drawer.is-open {
opacity: 1;
transform: translateY(0);
}
<div>
Link To Show Drawer
</div>
<div class="drawer" id="drawer-01">
<div class="wrapper">
<h3>Test</h3>
<p>This is the drawer</p>
<a data-drawer="#drawer-01" href="#!">Close The Drawer</a>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Toggle animate panel in pure JavaScript and .classList.toggle()
If you don't want to use jQuery only because of such a simple task, here's in vanilla JavaScript:
const toggleDrawer = (evt) => {
evt.preventDefault();
document.querySelector(evt.target.getAttribute('data-drawer')).classList.toggle('is-open');
}
document.querySelectorAll('[data-drawer]').forEach(btn => btn.addEventListener('click', toggleDrawer));
.drawer {
position: fixed;
height: 100%;
width: 100%;
left: 0;
top: 0;
background: #0c1f3f;
overflow-y: scroll;
color: white;
/* Initial transforms */
opacity: 0;
transform: translateY(100%);
transition: 0.5s ease;
}
.drawer.is-open {
opacity: 1;
transform: translateY(0);
}
Link To Show Drawer
<div class="drawer" id="drawer-01">
<div class="wrapper">
<h3>Test</h3>
<p>This is the drawer</p>
<a data-drawer="#drawer-01" href="#!">Close The Drawer</a>
</div>
</div>
Toggle animate panel in pure HTML + CSS and a hidden checkbox
Need support for no-JS environment? Here you go
.drawer-button {color: blue; cursor: pointer;}
.drawer {
position: fixed;
height: 100%;
width: 100%;
left: 0;
top: 0;
background: #0c1f3f;
overflow-y: scroll;
color: white;
/* Initial transforms */
opacity: 0;
transform: translateY(100%);
transition: 0.5s ease;
}
.drawer-toggler:checked+.drawer {
opacity: 1;
transform: translateY(0);
}
<label class="drawer-button" for="drawer-01">SHOW DRAWER</label>
<div>Other HTML here...</div>
<input id="drawer-01" class="drawer-toggler" type="checkbox" hidden>
<div class="drawer">
<div class="wrapper">
<h3>Test</h3>
<p>This is the drawer</p>
<label class="drawer-button" for="drawer-01">CLOSE DRAWER</label>
</div>
</div>
If you're able to give the .drawer a fixed height, then you can change the bottom property to initially be negative that amount.
Be sure to also add the opacity to the transition, otherwise it will instantly hide instead of fading out gently.
$(".drawer-link").click(function(e) {
var vdata = $(this).data("id");
$(".drawer[data-id=" + vdata + "]").addClass("open-drawer");
e.preventDefault();
});
$(".close").on("click", function(e) {
$(".drawer").toggleClass("open-drawer");
e.preventDefault();
});
body {
padding: 20px;
}
.drawer {
position: fixed;
height: 150px;
bottom: -150px;
width: 100%;
left: 0;
background: #0c1f3f;
padding-top: 90px;
overflow-y: scroll;
transition: bottom 0.5s ease, opacity 0.5s ease;
color: white;
opacity: 0;
}
.wrapper {
width: 100%;
max-width: 1140px;
margin: 0 auto;
}
.open-drawer {
bottom: 0px;
opacity: 1;
}
.close {
color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<a class="drawer-link" href="#" data-id="drawer-01">Link To Show Drawer</a>
</div>
<div class="drawer" data-id="drawer-01">
<div class="wrapper">
<h3>Test</h3>
<p>This is the drawer</p>
<a class="close" href="#">Close The Drawer</a>
</div>
</div>
I'm trying to rebuild not copy and paste this website http://paramoredigital.com/ only for learning direction. I have problem with menu transition, more precisely If you click top-right button menu will show up smoothly and I don't know how to do it in my code.
Here is my code https://github.com/Szuchow/paramore-digital.
Click on the X and the menu will appear. The rest is a matter of styling.
$("body").on("click", function() {
$(".menu").addClass("open");
})
body {
padding: 0;
}
.container {
width: 100vw;
height: 100vh;
background: lightblue;
}
.menu {
position: absolute;
top: 0;
left: 0;
opacity: 0;
background: pink;
transition: opacity 1s ease;
width: 100vw;
height: 100vh;
}
.menu.open {
opacity: 1;
}
.toggle a {
font-size: 2em;
text-decoration: none;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<span class="toggle">X</span>
<div class="menu">
<ul>
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>
</div>
</div>