Mobile full screen expand menu CSS Για το site και το blog σας!
Μια εναλλακτική απόδοση του μενού πλήρους οθόνης για κινητές συσκευές, αυτή χρησιμοποιεί CSS3.
Παντώντας το κουμπί γεμίζει σε όλοι την οθόνη σας.
Αντιγραφή και επεξεργασία τον παρακάτω κώδικα:
<link href="http://fonts.googleapis.com/css?family=Bitter&subset=latin" rel="stylesheet" type="text/css">
<style>
/* foulscode.com */body { /* webkit adjacent sibling bug fix: https://css-tricks.com/webkit-sibling-bug/ */
-webkit-animation: bugfix infinite 1s;
}
@-webkit-keyframes bugfix {
from {padding:0;}
to {padding:0;}
}
input[type="checkbox"]#togglebox {
/* checkbox used to toggle menu state */
position: absolute;
left: 0;
top: 0;
visibility: hidden;
}
label#navtoggler{ /* Main label icon to toggle menu state */
z-index: 9;
display: block;
position: relative;
font-size: 8px;
/* change font size to change label dimensions. Leave width/height below alone */
width: 4em;
height: 2.5em;
top: 0;
left: 0;
text-indent: -1000px;
border: 0.6em solid black;
/* border color */
border-width: 0.6em 0;
cursor: pointer;
}
label#navtoggler::before{
/* inner strip inside label */
content: "";
display: block;
position: absolute;
width: 100%;
height: 0.6em;
top: 50%;
margin-top: -0.3em;
left: 0;
background: black; /* stripes background color. Change to match border color of parent label above */
}
nav#expand-fullpagemenu{ /* Full screen nav menu */
width: 100%;
height: 100%;
top: 0;
left: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transform: scaleY(0);
-moz-transform: scaleY(0);
transform: scaleY(0);
background: #C8F29D;
display: block;
position: fixed;
visibility: hidden;
z-index: 100;
opacity: 1;
text-align: center;
overflow: auto;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
}
nav#expand-fullpagemenu *{
opacity: 0;
}
nav#expand-fullpagemenu a{
text-decoration: none;
color: black;
text-transform: uppercase;
}
nav#expand-fullpagemenu ul{
list-style: none;
margin: 0;
padding: 0;
position: relative;
max-height: 100%;
top: 40%; /* almost center UL vertically inside nav. When menu expands then center it */
-webkit-transform: translateY(-50%); /* center UL vertically inside nav */
transform: translateY(-50%);
font: bold 2em 'Bitter', sans-serif; /* use google font inside nav UL */
}
nav#expand-fullpagemenu ul li{
margin-bottom: 25px;
}
nav#expand-fullpagemenu ul li a{
padding: 10px;
}
nav#expand-fullpagemenu ul li a:hover{
text-decoration: underline;
}
nav#expand-fullpagemenu label#closex{ /* Large x close button inside nav */
width: 80px;
height: 80px;
overflow: hidden;
display: block;
position: absolute;
cursor: pointer;
text-indent: -1000px;
z-index: 10;
top: 0;
right: 0;
}
nav#expand-fullpagemenu label#closex::before, nav label#closex::after{ /* render large cross inside close button */
content: "";
display: block;
position: absolute;
width: 100%;
height: 6px;
background: black;
top: 50%;
margin-top: -3px;
-ms-transform: rotate(0);
-webkit-transform: rotate(0);
transform: rotate(0);
}
nav#expand-fullpagemenu label#closex::after{ /* render large cross inside close button */
-ms-transform: rotate(0);
-webkit-transform: rotate(0);
transform: rotate(0);
}
input[type="checkbox"]#togglebox:checked ~ nav#expand-fullpagemenu{ /* nav state when corresponding checkbox is checked */
visibility: visible;
-webkit-transform: scaleY(1);
-moz-transform: scaleY(1);
transform: scaleY(1);
opacity: 1;
}
input[type="checkbox"]#togglebox:checked ~ nav#expand-fullpagemenu *{
visibility: visible;
opacity: 1;
/* last 0.5s specifies delay before transition begins */
-webkit-transition: opacity 0.5s 0.5s;
-moz-transition: opacity 0.5s 0.5s;
transition: opacity 0.5s 0.5s;
}
input[type="checkbox"]#togglebox:checked ~ nav#expand-fullpagemenu ul{
top: 50%;
-webkit-transition: top 0.5s 0.5s;
-moz-transition: top 0.5s 0.5s;
transition: top 0.5s 0.5s;
}
input[type="checkbox"]#togglebox:checked ~ nav#expand-fullpagemenu label#closex::before{
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transition: all 0.5s 0.5s;
-moz-transition: all 0.5s 0.5s;
transition: all 0.5s 0.5s;
}
input[type="checkbox"]#togglebox:checked ~ nav#expand-fullpagemenu label#closex::after{
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: all 0.5s 0.5s;
-moz-transition: all 0.5s 0.5s;
transition: all 0.5s 0.5s;
}
/* foulscode.com */
</style>
<script>
// Extra function to control menu state from anywhere on your page/ inside your script
function expandfullscreenmenu(action){ //param: 'open', 'close', or empty to toggle menu state
var togglebox = document.getElementById("togglebox")
var newstate = (action == 'open')? true : (action == 'close')? false : !togglebox.checked
togglebox.checked = newstate
}
</script>
<!--[if lte IE 8]>
<style>
/* IE8 specific CSS */
label#navtoggler{
border-width: 0.6em;
}
nav#expand-fullpagemenu label#closex{
font-size: 2em;
text-indent: 0;
}
#expand-fullpagemenu{
visibility: hidden;
}
</style>
<script>
// IE8 MENU COMPATIBILITY CODE:
document.createElement("nav")
function expandfullscreenmenu(action){
var nav = document.getElementById("expand-fullpagemenu")
var newstate = (action == 'open')? 'visible' : (action == 'close')? 'hidden' : nav.style.visibility == 'hidden'? 'visible' : 'hidden'
nav.style.visibility = newstate
}
window.attachEvent("onload", function(){
document.getElementById("navtoggler").onclick = function(){
expandfullscreenmenu('open')
}
document.getElementById("closex").onclick = function(){
expandfullscreenmenu('close')
}
})
</script>
<![endif]-->
<div class="menuwrapper">
<input type="checkbox" id="togglebox" />
<label for="togglebox" id="navtoggler"></label>
<nav id="expand-fullpagemenu">
<label for="togglebox" id="closex">Close</label>
<ul>
<li><a href="https://www.foulscode.com">Home</a></li>
<li><a href="https://www.foulscode.com">HTML</a></li>
<li><a href="https://www.foulscode.com/">Library</a></li>
<li><a href="https://foulscode.com/">Forums</a></li>
<li><a href="https://www.foulscode.com">Gallery</a></li>
<li><a href="https://www.javascriptkit.com">Java</a></li>
<li><a href="https://www.foulscode.com">CMS</a></li>
</ul>
</nav>
</div>
Αποθήκευση και είναι έτοιμο
Σχόλια