Commit fadfafa6 authored by o@immerda.ch's avatar o@immerda.ch
Browse files

Merge branch 'animation' into 'master'

animation and css

See merge request !1
parents 71183ff6 c5bcd0b5
var style = `
.ipick-button.ipick-open {
right: calc(6cm - 150px);
width: 300px;
}
.ipick-menu.ipick-open {
display: block;
}
(function(document) {
var style = `
#ipick-button {
position: absolute;
bottom: 0;
left: 0;
width: 10.9375em;
height: 7.8125em;
transform: translate(-50%, 0);
cursor: pointer;
background-image:
linear-gradient(
to right,
transparent,
transparent 50%,
#ffffff 50%,
transparent 98%
);
}
.ipick-button {
position: fixed;
right: 0;
bottom: 0;
background-image: url("logo.png");
width: 150px;
height: 214px;
}
.ipick-menu {
position: fixed;
bottom: 0;
right: 0;
display: none;
height: 100%;
width: 6cm;
background-color: #222;
filter: alpha(opacity=95);
opacity: 0.95;
clip-path: polygon(100% 0%, 0% 0%, 0% calc(100% - 214px), 150px calc(100% - 214px), 150px 100%, 100% 100%);
}
.ipick-menu ul {
bottom: 200px;
position: absolute;
}
.ipick-menu ul li a {
color: green;
font-size: 20pt;
}
`;
#ipick-button img {
width: 10.9375em;
height: 7.8125em;
}
.ipick-menu {
position: fixed;
bottom: 0;
right: 0;
height: 100%;
width: 18.75em;
max-width: 0;
transition: max-width 300ms ease-in-out;
background-color: #222;
}
.ipick-menu ul {
bottom: 200px;
position: absolute;
}
.ipick-menu ul li a {
color: green;
font-size: 20pt;
}
var styleDom = document.createElement("style");
styleDom.innerHTML = style;
document.body.appendChild(styleDom);
.ipick-open .ipick-menu {
max-width: 18.75em;
}
`;
// add styles
var styleDom = document.createElement("style");
styleDom.innerHTML = style;
document.body.appendChild(styleDom);
var menu = document.createElement("div");
menu.className = "ipick-menu";
menu.innerHTML = `
// create menu
var menu = document.createElement("div");
menu.className = "ipick-menu";
menu.innerHTML = `
<ul>
<li><a href="https://webmail.immerda.ch">webmail</a></li>
<li><a href="https://users.immerda.ch">konto</a></li>
<li><a href="https://docs.immerda.ch">hilfe</a></li>
<li><a href="https://webmail.immerda.ch">Webmail</a></li>
<li><a href="https://users.immerda.ch">Konto</a></li>
<li><a href="https://docs.immerda.ch">hilfe</a></li>
</ul>
`;
document.body.appendChild(menu);
function openMenu() {
menu.className = "ipick-menu ipick-open";
b.className = "ipick-button ipick-open";
b.onclick = closeMenu;
}
function closeMenu() {
menu.className = "ipick-menu";
b.className = "ipick-button";
b.onclick = openMenu;
}
// create menu toggler
var image = document.createElement("img");
image.src = "logo-source.svg";
var toggle = document.createElement("div");
toggle.id = "ipick-button";
toggle.onclick = openMenu;
// add menu toggler
toggle.appendChild(image);
menu.appendChild(toggle);
// add menu to the dom
document.body.appendChild(menu);
/**
* Open the menu
*/
function openMenu() {
document.body.classList.add("ipick-open");
this.onclick = closeMenu;
// hook for menu
var event = new Event('ipick.open');
menu.dispatchEvent(event)
}
var b = document.createElement("div");
b.className = "ipick-button";
b.onclick = openMenu;
document.body.appendChild(b);
/**
* Close the menu on the right
*/
function closeMenu() {
document.body.classList.remove("ipick-open");
this.onclick = openMenu;
// hook for menu
var event = new Event('ipick.close');
menu.dispatchEvent(event)
}
})(document);
This diff is collapsed.
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment