HTML
<!DOCTYPE html>
<html lang="en">
<!--[if lte IE 8]>
<html lang="en" class="oldbro">
<![endif]-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=yes">
<title>Menu</title>
<style>
*{padding:0;margin:0;}
html {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*, *:before, *:after {
-webkit-box-sizing: inherit;
-moz-box-sizing: inherit;
box-sizing: inherit;
}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
hr {
border: 0;
height: 0;
border-top: 1px solid rgba(0, 0, 0, 0.1);
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
padding:0;
margin:11px 0;
}
html {
height: 100%;
}
body {
font: 1em/1.5 Arial, Geneva, Tahoma, sans-serif;
overflow-x: hidden;
background:#F7F7F7;
color: #555;
min-height: 1000px; /*to make scrollbar visible this is for meniu after hover when shows up apears scrolbars and text floats to new positions */
}
body:after {display: block;content: "\2193";}
a{color:#000;font-weight:900;}a:focus{outline:0;}
a:link,a:visited,a:focus,a:active{color:#222;text-decoration:none}
a:hover{color:#000;text-decoration:underline;cursor:pointer}
#header{background: url(http://burundukas.lt/templates/menu3/img/h.png) no-repeat; display: block;overflow: hidden;height:100px;position: relative;}
#header a{color:#777;position: absolute;bottom: 24px; right: 24px; text-shadow: -1px -1px 0px #f7f7f7, -2px -2px 2px #eee, 1px 1px 0px #f7f7f7, 2px 2px 2px #aaaaaa;}
#seconds{display: block;position: relative;}
h1:first-child,h2:first-child,h3:first-child {margin-top: 24px; margin-bottom: 0;}
h1 {font-size:1.5em;line-height:1;text-align: center;}
h2 {font-family: Verdana, sans-serif;}
h1, h2, p{padding:0 1em;} p {text-align: justify; margin-top: 1em;}
/*meniu horizontal*/
#main {position:relative;margin: 0 auto; width: 1000px;background:#fdfdfd;
-webkit-box-shadow:0px 0px 0px 1px #ddd ,0px 1px 4px 0px #ddd ;
-moz-box-shadow:0px 0px 0px 1px #ddd ,0px 1px 4px 0px #ddd ;
box-shadow:0px 0px 0px 1px #ddd ,0px 1px 4px 0px #ddd ;
}
#footer {display: block;height: 120px;text-align: right;position: relative;}
#footer span {padding: 0 24px; font-size: 12px;}
#nav {
padding-left: 48px;
-webkit-box-shadow:0px 1px 0px 0px #cccccc inset,0px -1px 0px 0px #cccccc inset;
-moz-box-shadow:0px 1px 0px 0px #cccccc inset,0px -1px 0px 0px #cccccc inset;
box-shadow:0px 1px 0px 0px #cccccc inset,0px -1px 0px 0px #cccccc inset;
background:#eee;
}
#nav ul {
padding: 0;
margin: 0;
list-style: none;
overflow: hidden;
}
#nav li {
float: left;
display: block;
}
#nav li a{
background:#eee;
font-weight: 400;
display:block;
font-size:24px;
text-decoration:none;
color:#777;
padding: 10px 22px;
outline:0;
white-space: nowrap;
font-size:18px;
position:relative;
cursor:pointer;
text-transform:lowercase;
text-shadow: 0 1px 0 #fff;
text-shadow: -1px -1px 0px #f7f7f7, -2px -2px 2px #eee, 1px 1px 0px #f7f7f7, 2px 2px 2px #aaaaaa;
-webkit-box-shadow:1px -1px 0px 0px #cccccc inset,0px 1px 0px 0px #cccccc inset,1px 0px 0px 0px #cccccc ;
-moz-box-shadow:1px -1px 0px 0px #cccccc inset,0px 1px 0px 0px #cccccc inset,1px 0px 0px 0px #cccccc ;
box-shadow:1px -1px 0px 0px #cccccc inset,0px 1px 0px 0px #cccccc inset,1px 0px 0px 0px #cccccc ;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
supported by Chrome and Opera */
}
#nav ul li:hover a{background:#dfdfdf;}
#nav ul li ul li a:hover {color: #555;background: #eee;-webkit-box-shadow:0px 1px 0px 0px #aaaaaa inset,0px -1px 0px 0px #ffffff inset;
-moz-box-shadow:0px 1px 0px 0px #aaaaaa inset,0px -1px 0px 0px #ffffff inset;
box-shadow:0px 1px 0px 0px #aaaaaa inset,0px -1px 0px 0px #ffffff inset;}
#nav li ul {
margin-top: -2px;
min-width: 144px;
position: absolute;
top: 0;
left: -999em;
height: auto;
display: block;
-webkit-box-shadow:-1px 1px 0px 0px #ffffff ,1px 1px 0px 0px #ffffff ,0px 3px 2px 1px #aaaaaa ,0px 10px 100px 2px #eee ;
-moz-box-shadow:-1px 1px 0px 0px #ffffff ,1px 1px 0px 0px #ffffff ,0px 3px 2px 1px #aaaaaa ,0px 10px 100px 2px #eee ;
box-shadow:-1px 1px 0px 0px #ffffff ,1px 1px 0px 0px #ffffff ,0px 3px 2px 1px #aaaaaa ,0px 10px 100px 2px #eee ;
-webkit-border-bottom-right-radius: 3px;
-webkit-border-bottom-left-radius: 3px;
-moz-border-radius-bottomright: 3px;
-moz-border-radius-bottomleft: 3px;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
}
#nav li ul li{
clear:left;
display:block;
width: 100%;
z-index:1;
}
#nav li:hover span{color:#555;}
#nav li span{position:absolute;display:block;text-align:center;width:20px;font-size:20px;color:#aaa;bottom:0;right:0;}
#nav li > ul {
top: auto;
left: -999em;
z-index:999;
}
#nav li:hover ul, li.over ul{left: auto;}
#main {
clear: left;
position: relative;
display: block;
}
#topout{
display: block;
float: right;
position: relative;
width: 48px;
height: auto;
}
#top{
position:fixed;
display: block;
line-height:48px;
text-align: center;
height: 48px;
width: 48px;
background: #aaa;
top:0;
cursor: pointer;
opacity: .7;
text-decoration: none;
z-index: 999;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
supported by Chrome and Opera */
-webkit-box-shadow:-1px 1px 0px 0px #ffffff ,1px 1px 0px 0px #ffffff ,0px 3px 2px 1px #aaaaaa ,0px 10px 100px 2px #eee ;
-moz-box-shadow:-1px 1px 0px 0px #ffffff ,1px 1px 0px 0px #ffffff ,0px 3px 2px 1px #aaaaaa ,0px 10px 100px 2px #eee ;
box-shadow:-1px 1px 0px 0px #ffffff ,1px 1px 0px 0px #ffffff ,0px 3px 2px 1px #aaaaaa ,0px 10px 100px 2px #eee ;
}
#top:hover {opacity: 1}
#theDiv:before {
content:' ';
display: block;
width: 50px;
height: 50px;
background: green;
}
@media screen and (max-width:480px) {
#main {width: 100%;}
#nav li{float: none;}
#nav ul, #nav li, #nav a{width: 100%;}
#nav {padding:0;}
}
</style>
</head>
<body>
<div id="main">
<!--<div id="topout"><a id="top">Top</a></div>-->
<div id="header"><a href="/">HEADER</a></div>
<div id="nav">
<ul class="menu">
<li><a href="">menu</a>
<ul>
<li><a href="#harom">aaa</a>
<li><a href="#eros">bbb</a>
</ul>
</li>
<li><a href="">menu</a>
<ul>
<li><a href="http://www.burundukas.lt/home/burunduk/webdesign/">aaa</a>
<li><a href="http://www.burundukas.lt/home/burunduk/webdesign/">bbb</a>
<li><a href="http://www.burundukas.lt/home/burunduk/webdesign/">ccc</a>
<li><a href="http://www.burundukas.lt/home/burunduk/webdesign/">aaaaaaaa</a></li>
<li><a href="http://www.burundukas.lt/home/burunduk/webdesign/">bbbbbbbb</a></li>
<li><a href="http://www.burundukas.lt/home/burunduk/webdesign/">cccccccc</a></li>
<li><a href="http://www.burundukas.lt/home/burunduk/webdesign/">dddddddd</a></li>
<li><a href="http://www.burundukas.lt/home/burunduk/webdesign/">eeeeeeee</a></li>
</ul>
</li>
<li><a href="" >menu</a>
<ul>
<li><a href="http://www.burundukas.lt/home/burunduk/webdesign/">aaa</a>
<li><a href="http://www.burundukas.lt/home/burunduk/webdesign/">bbb</a>
<li><a href="http://www.burundukas.lt/home/burunduk/webdesign/">ccc</a>
<li><a href="http://www.burundukas.lt/home/burunduk/webdesign/">Very very very long line</a></li>
<li><a href="http://www.burundukas.lt/home/burunduk/webdesign/">bbbbbbbb</a></li>
<li><a href="http://www.burundukas.lt/home/burunduk/webdesign/">cccccccc</a></li>
<li><a href="http://www.burundukas.lt/home/burunduk/webdesign/">dddddddd</a></li>
<li><a href="http://www.burundukas.lt/home/burunduk/webdesign/">eeeeeeee</a></li>
</ul>
</li>
<li><a href="#about" >about</a></li>
<li><a href="" >menu</a>
<ul>
<li><a href="http://www.burundukas.lt/home/burunduk/webdesign/">aaaaaaaa</a></li>
<li><a href="http://www.burundukas.lt/home/burunduk/webdesign/">aaaaaaaa</a></li>
<li><a href="http://www.burundukas.lt/home/burunduk/webdesign/">bbbbbbbb</a></li>
<li><a href="http://www.burundukas.lt/home/burunduk/webdesign/">cccccccc</a></li>
<li><a href="http://www.burundukas.lt/home/burunduk/webdesign/">dddddddd</a></li>
<li><a href="http://www.burundukas.lt/home/burunduk/webdesign/">eeeeeeee</a></li>
<li><a href="http://www.burundukas.lt/home/burunduk/webdesign/">eeeeeeee</a></li>
<li><a href="http://www.burundukas.lt/home/burunduk/webdesign/">SUper long Very very very long line</a></li>
</ul>
</li>
</ul>
</div>
<div id="seconds">
<h1>Lorem ipsum dolor sit amet, no sed euismod dolorum fuisset</h1>
<p>Lorem ipsum dolor sit amet, no sed euismod dolorum fuisset, nulla ancillae ne nec? Graecis dolores repudiandae ut vim, mea an delectus explicari? Ius an eirmod discere epicuri. Ad porro liber possit vel, has etiam aliquam contentiones at? Ius cu erat probatus patrioque, mollis virtute no est, nostro offendit vix an.
</p>
<p id="eros">
Eros dolore ornatus qui ad? Ei vix porro detraxit philosophia? Sed salutandi assentior consectetuer in. Ea lobortis expetenda cum, eam postea dicunt regione in? Amet ipsum tritani pri an, denique suavitate no sed, eu mel reque labitur aliquando!
</p>
<p>
Et has possim albucius inimicus, his accusam aliquando no, mel quod magna in! Et eam nullam euripidis splendide, sit ad decore oblique adversarium? Quas facilisis pro ei, no augue theophrastus eum! Mei aperiam denique instructior cu. Tation consectetuer ei eam, mucius petentium intellegam at eos!
</p>
<p>
Eius semper conceptam eu mel, te splendide abhorreant quo. Pri cibo semper ut, idque vivendo has ne. Cu qui possim consulatu, epicuri probatus perpetua an mel. Dicat platonem qualisque nec at. At eam esse modus, ea possit virtute legendos vim. Nec an vocent deleniti assentior, ut mazim tamquam virtute nec, sed habeo quaeque repudiandae id. Eu dicunt oblique docendi sea, et vix splendide democritum.
</p>
<h2>Lorem ipsum dolor sit amet, no sed euismod dolorum fuisset</h2>
<p>
Usu in hinc gubergren, no vix quot eirmod, usu soleat disputationi ut? His an malis omnes dolorum, sea in nobis noster, scripta laoreet his ad. Admodum invenire nec ad. Te nec clita omittam, qui populo integre in? Has epicuri detracto omnesque in, id pro albucius comprehensam, ut mollis tincidunt vis.
</p>
<p>
No dicit everti contentiones vel. Te usu case iudicabit honestatis, case definiebas eu vim, an eius repudiare ius. An porro dicat ancillae pri, eos vocent corpora ex, ludus malorum maluisset eu ius! No cetero platonem elaboraret nam, usu et habeo elitr reprehendunt. Et falli mucius euismod eum, tollit audire eu duo. Mei ea assum meliore?
</p>
<p>
Quo te recusabo qualisque reprimique, probo semper noluisse te vix! Pro ne meliore placerat sententiae, at his iriure virtute vocibus! Omittam deserunt deseruisse pri cu? Ut corrumpit similique philosophia pri, ex eos labore intellegat.
</p>
<p id="harom">
Harum pertinacia id est. Vix iudico latine singul no, odio mutat debitis ea vim. Pri facilis lucilius ne. Sed ea quem magna consulatu, his vidit meliore te. An rebum consequuntur mei! Ea mei iudico nusquam, mea ex saepe soluta. Mutat homero duo cu.
</p>
<p>
At pri odio solet consulatu, qui in detracto perpetua. Eum at stet viris insolens, mel te consul omnium delicatissimi. Ne nec esse sanctus accusata, ad nam quot conclusionemque. Cu sea inani munere altera, mei odio recteque ei. Eripuit verterem scriptorem id vix, laoreet definitiones vim eu, cu eos elit deleniti definitionem.
</p>
<p>
Et labores appareat expetendis pri? Mea dico facilis scripserit ea. Omnesque expetendis vis te, libris luptatum sit et. Dicit dicunt no sit, natum docendi recteque vim an?
</p>
</div>
<div id="footer"><span>by Kostas Šliažas</span>
<div id="about"><span>ok ok ok</span></div>
</div>
</div>
<script>
"use strict";
;(function() {
var tops = document.createElement("a");
var heights = function(hei) {
return window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
}
window.addEventListener('resize', function(event){
tops.style.top = heights()-48+"px";
});
document.addEventListener('DOMContentLoaded', function () {
var main = document.getElementById('main');
var div = document.createElement("div");
div.setAttribute('id','topout');
main.appendChild(div);
tops.appendChild(document.createTextNode("TOP\u2191"));
tops.setAttribute('id','top');
tops.setAttribute('href','#');
div.insertBefore(tops, div.childNodes[0]);
tops.style.top = heights()-48+"px";
document.getElementById('top').addEventListener('click', function (e) {
e.preventDefault();
scroll(0,0);
},false);
},false);
var bro = document.getElementsByTagName('html')[0].className || undefined;
if (bro !== "oldbro") {
var menus = document.getElementById('nav').getElementsByTagName('ul');
var i = 1;
var len = menus.length;
for (i; i < len; i++) {
var ul = menus[i];
ul.parentElement.firstChild.addEventListener('click', function(e){
e.preventDefault();
});
ul.parentElement.firstChild.innerHTML += ' <span>⇣</span>';
function ok(a){
a.addEventListener('mouseout', function () {
this.getElementsByTagName('ul')[0].removeAttribute("style");
},false);
}
ul.parentElement.addEventListener('click', function () {
var uli = this.getElementsByTagName('ul')[0];
uli.style.left.length !== 4 ? uli.style.left = "auto" : uli.style.left = "-999em";
ok(this);
}, false);
}
}
})();
</script>
</body>
</html>
