Update 23 #32
57
index.php
57
index.php
@@ -16,61 +16,26 @@ if ($tab == "") {$tab = "home";}
|
|||||||
<link rel="stylesheet" type="text/css" href="main/min-style.css">
|
<link rel="stylesheet" type="text/css" href="main/min-style.css">
|
||||||
<script src="main/lightbox-plus-jquery.min.js"></script>
|
<script src="main/lightbox-plus-jquery.min.js"></script>
|
||||||
<link rel="stylesheet" type="text/css" href="main/lightbox.min.css">
|
<link rel="stylesheet" type="text/css" href="main/lightbox.min.css">
|
||||||
</head>
|
<script src="main/nav2.js"></script>
|
||||||
|
</head>
|
||||||
|
|
||||||
<header>
|
<!--header>
|
||||||
|
|
||||||
|
<h1>
|
||||||
|
Mellys Weihnachts Kalender
|
||||||
<h1>
|
</h1>
|
||||||
Mellys Weihnachts Kalender
|
</header-->
|
||||||
</h1>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<!-- mobil sass--->
|
<?php include('tab/nav2.php');?>
|
||||||
<input class="side-menu" type="checkbox" id="side-menu"/>
|
|
||||||
<label class="hamb" for="side-menu"><span class="hamb-line"></span></label>
|
|
||||||
<!-- mobil sass ende --->
|
|
||||||
<nav>
|
|
||||||
<ul>
|
|
||||||
<li><a href="?tab=home" <?php if ($tab == "home")?>>Home</a></li>
|
|
||||||
<li><a href="?tab=galerie" <?php if ($tab == "galerie")?>>Galerie</a></li>
|
|
||||||
<li><a href="?tab=radio" <?php if ($tab == "radio")?>>Musik</a></li>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
|
|
||||||
<li class="mainMenu"><a href="#">Test</a>
|
|
||||||
<ul class="submenu">
|
|
||||||
<li><a href="#">Spiel</a></li>
|
|
||||||
<li><a href="#">Rang</a></li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
<li class="mainMenu"><a href="#">Test2</a>
|
|
||||||
<ul class="submenu">
|
|
||||||
<li><a href="#">Spiel</a></li>
|
|
||||||
<li><a href="#">Rang</a></li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<script type="text/javascript">
|
|
||||||
$(".mainMenu > a").mouseover(function(){
|
|
||||||
$(this).siblings().addClass('submenuActive');
|
|
||||||
})
|
|
||||||
$(".mainMenu").mouseleave(function(){
|
|
||||||
$(this).children().removeClass('submenuActive')
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
|
|
||||||
|
<article>
|
||||||
|
|
||||||
<article>
|
<?php include('tab/'.$tab.'.php');?>
|
||||||
|
|
||||||
<?php include('tab/'.$tab.'.php');?>
|
</article>
|
||||||
|
|
||||||
</article>
|
|
||||||
|
|
||||||
<footer>
|
<footer>
|
||||||
<img src="./inc/bg/1605110464788.png"></img>
|
<img src="./inc/bg/1605110464788.png"></img>
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
156
main/nav2.css
Normal file
156
main/nav2.css
Normal file
@@ -0,0 +1,156 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
.navigation {
|
||||||
|
height: 70px;
|
||||||
|
background: #262626;
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand {
|
||||||
|
position: absolute;
|
||||||
|
padding-left: 20px;
|
||||||
|
float: left;
|
||||||
|
line-height: 70px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-size: 1.4em;
|
||||||
|
}
|
||||||
|
.brand a,
|
||||||
|
.brand a:visited {
|
||||||
|
color: #ffffff;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-container {
|
||||||
|
max-width: 1000px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
nav ul {
|
||||||
|
list-style: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
nav ul li {
|
||||||
|
float: left;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
nav ul li a,
|
||||||
|
nav ul li a:visited {
|
||||||
|
display: block;
|
||||||
|
padding: 0 20px;
|
||||||
|
line-height: 70px;
|
||||||
|
background: #262626;
|
||||||
|
color: #ffffff;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
nav ul li a:hover,
|
||||||
|
nav ul li a:visited:hover {
|
||||||
|
background: #2581DC;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
nav ul li a:not(:only-child):after,
|
||||||
|
nav ul li a:visited:not(:only-child):after {
|
||||||
|
padding-left: 4px;
|
||||||
|
content: " ▾";
|
||||||
|
}
|
||||||
|
nav ul li ul li {
|
||||||
|
min-width: 190px;
|
||||||
|
}
|
||||||
|
nav ul li ul li a {
|
||||||
|
padding: 15px;
|
||||||
|
line-height: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-dropdown {
|
||||||
|
position: absolute;
|
||||||
|
display: none;
|
||||||
|
z-index: 1;
|
||||||
|
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Mobile navigation */
|
||||||
|
.nav-mobile {
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
background: #262626;
|
||||||
|
height: 70px;
|
||||||
|
width: 70px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 798px) {
|
||||||
|
.nav-mobile {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
nav {
|
||||||
|
width: 100%;
|
||||||
|
padding: 70px 0 15px;
|
||||||
|
}
|
||||||
|
nav ul {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
nav ul li {
|
||||||
|
float: none;
|
||||||
|
}
|
||||||
|
nav ul li a {
|
||||||
|
padding: 15px;
|
||||||
|
line-height: 20px;
|
||||||
|
}
|
||||||
|
nav ul li ul li a {
|
||||||
|
padding-left: 30px;
|
||||||
|
}
|
||||||
|
.nav-dropdown {
|
||||||
|
position: static;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (min-width: 799px) {
|
||||||
|
.nav-list {
|
||||||
|
display: block !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
#nav-toggle {
|
||||||
|
position: absolute;
|
||||||
|
left: 18px;
|
||||||
|
top: 22px;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 10px 35px 16px 0px;
|
||||||
|
}
|
||||||
|
#nav-toggle span,
|
||||||
|
#nav-toggle span:before,
|
||||||
|
#nav-toggle span:after {
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: 1px;
|
||||||
|
height: 5px;
|
||||||
|
width: 35px;
|
||||||
|
background: #ffffff;
|
||||||
|
position: absolute;
|
||||||
|
display: block;
|
||||||
|
content: "";
|
||||||
|
transition: all 300ms ease-in-out;
|
||||||
|
}
|
||||||
|
#nav-toggle span:before {
|
||||||
|
top: -10px;
|
||||||
|
}
|
||||||
|
#nav-toggle span:after {
|
||||||
|
bottom: -10px;
|
||||||
|
}
|
||||||
|
#nav-toggle.active span {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
#nav-toggle.active span:before, #nav-toggle.active span:after {
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
#nav-toggle.active span:before {
|
||||||
|
transform: rotate(45deg);
|
||||||
|
}
|
||||||
|
#nav-toggle.active span:after {
|
||||||
|
transform: rotate(-45deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
article {
|
||||||
|
max-width: 1000px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
23
main/nav2.js
Normal file
23
main/nav2.js
Normal file
@@ -0,0 +1,23 @@
|
|||||||
|
(function($) { // Begin jQuery
|
||||||
|
$(function() { // DOM ready
|
||||||
|
// If a link has a dropdown, add sub menu toggle.
|
||||||
|
$('nav ul li a:not(:only-child)').click(function(e) {
|
||||||
|
$(this).siblings('.nav-dropdown').toggle();
|
||||||
|
// Close one dropdown when selecting another
|
||||||
|
$('.nav-dropdown').not($(this).siblings()).hide();
|
||||||
|
e.stopPropagation();
|
||||||
|
});
|
||||||
|
// Clicking away from dropdown will remove the dropdown class
|
||||||
|
$('html').click(function() {
|
||||||
|
$('.nav-dropdown').hide();
|
||||||
|
});
|
||||||
|
// Toggle open and close nav styles on click
|
||||||
|
$('#nav-toggle').click(function() {
|
||||||
|
$('nav ul').slideToggle();
|
||||||
|
});
|
||||||
|
// Hamburger to X toggle
|
||||||
|
$('#nav-toggle').on('click', function() {
|
||||||
|
this.classList.toggle('active');
|
||||||
|
});
|
||||||
|
}); // end DOM ready
|
||||||
|
})(jQuery); // end jQuery
|
||||||
185
src/sass/_nav2.sass
Normal file
185
src/sass/_nav2.sass
Normal file
@@ -0,0 +1,185 @@
|
|||||||
|
// Navigation Variables
|
||||||
|
$content-width: 100%
|
||||||
|
$breakpoint: 799px
|
||||||
|
$nav-height: 70px
|
||||||
|
$nav-background: hsl(0,0%,100%,0.5)
|
||||||
|
$nav-font-color: darkred
|
||||||
|
$link-hover-color: Lightgrey
|
||||||
|
$nav-background2: url("../inc/bg/christmas background.jpg") 0 86% no-repeat
|
||||||
|
|
||||||
|
// Blauer klik Hintergrund entfernen
|
||||||
|
*:focus
|
||||||
|
-webkit-tap-highlight-color: transparent
|
||||||
|
-webkit-touch-callout: none
|
||||||
|
-webkit-user-select: none
|
||||||
|
-khtml-user-select: none
|
||||||
|
-moz-user-select: none
|
||||||
|
-ms-user-select: none
|
||||||
|
user-select: none
|
||||||
|
outline: none !important
|
||||||
|
|
||||||
|
// Outer navigation wrapper
|
||||||
|
.navigation
|
||||||
|
height: $nav-height
|
||||||
|
background: $nav-background2
|
||||||
|
border-radius: 0 0 2rem 2rem
|
||||||
|
background-size: 100%
|
||||||
|
border-bottom: 4px ridge darkgreen
|
||||||
|
|
||||||
|
|
||||||
|
// Logo and branding
|
||||||
|
.brand
|
||||||
|
position: absolute
|
||||||
|
padding-left: 20px
|
||||||
|
float: left
|
||||||
|
line-height: $nav-height
|
||||||
|
text-transform: uppercase
|
||||||
|
font-size: 1.4em
|
||||||
|
font-weight: bold
|
||||||
|
text-shadow: 1px 0 #fff, 0 1px #fff, -1px 0 #fff, 0 -1px #fff
|
||||||
|
a,
|
||||||
|
a:visited
|
||||||
|
color: $nav-font-color
|
||||||
|
text-decoration: none
|
||||||
|
|
||||||
|
|
||||||
|
// Container with no padding for navbar
|
||||||
|
.nav-container
|
||||||
|
max-width: $content-width
|
||||||
|
margin: 0 auto
|
||||||
|
|
||||||
|
|
||||||
|
// Navigation
|
||||||
|
nav
|
||||||
|
float: right
|
||||||
|
font-weight: bold
|
||||||
|
text-shadow: 1px 0 #fff, 0 1px #fff, -1px 0 #fff, 0 -1px #fff
|
||||||
|
ul
|
||||||
|
list-style: none
|
||||||
|
margin: 0
|
||||||
|
padding: 0
|
||||||
|
background-color: $nav-background
|
||||||
|
li
|
||||||
|
float: left
|
||||||
|
position: relative
|
||||||
|
a,
|
||||||
|
a:visited
|
||||||
|
display: block
|
||||||
|
padding: 0 20px
|
||||||
|
line-height: $nav-height
|
||||||
|
color: $nav-font-color
|
||||||
|
text-decoration: none
|
||||||
|
|
||||||
|
&:hover, &:active, &.active
|
||||||
|
//background: $link-hover-color
|
||||||
|
color: red
|
||||||
|
transform: scale(1.1)
|
||||||
|
|
||||||
|
&:not(:only-child):after
|
||||||
|
padding-left: 4px
|
||||||
|
content: '▾'
|
||||||
|
|
||||||
|
// Dropdown list
|
||||||
|
ul li
|
||||||
|
min-width: 190px
|
||||||
|
a
|
||||||
|
padding: 15px
|
||||||
|
line-height: 20px
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// Dropdown list binds to JS toggle event
|
||||||
|
.nav-dropdown
|
||||||
|
position: absolute
|
||||||
|
display: none
|
||||||
|
z-index: 1
|
||||||
|
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.20)
|
||||||
|
margin-top: 4px
|
||||||
|
font-weight: bold
|
||||||
|
|
||||||
|
|
||||||
|
/* Mobile navigation */
|
||||||
|
|
||||||
|
// Binds to JS Toggle
|
||||||
|
.nav-mobile
|
||||||
|
display: none
|
||||||
|
position: absolute
|
||||||
|
top: 0
|
||||||
|
right: 0
|
||||||
|
height: $nav-height
|
||||||
|
width: $nav-height
|
||||||
|
|
||||||
|
@media only screen and (max-width: 798px)
|
||||||
|
// Hamburger nav visible on mobile only
|
||||||
|
.nav-mobile
|
||||||
|
display: block
|
||||||
|
|
||||||
|
nav
|
||||||
|
width: 100%
|
||||||
|
padding: $nav-height 0 15px 0
|
||||||
|
text-shadow: none
|
||||||
|
ul
|
||||||
|
display: none
|
||||||
|
border: 4px ridge darkgreen
|
||||||
|
border-radius: 2rem
|
||||||
|
|
||||||
|
li
|
||||||
|
float: none
|
||||||
|
a
|
||||||
|
padding: 15px
|
||||||
|
line-height: 20px
|
||||||
|
|
||||||
|
ul li a
|
||||||
|
padding-left: 30px
|
||||||
|
|
||||||
|
|
||||||
|
.nav-dropdown
|
||||||
|
position: static
|
||||||
|
background: none
|
||||||
|
border: none
|
||||||
|
box-shadow: none
|
||||||
|
|
||||||
|
|
||||||
|
@media screen and (min-width: $breakpoint)
|
||||||
|
.nav-list
|
||||||
|
display: block !important
|
||||||
|
|
||||||
|
#nav-toggle
|
||||||
|
position: absolute
|
||||||
|
left: 18px
|
||||||
|
top: 22px
|
||||||
|
cursor: pointer
|
||||||
|
padding: 10px 0px 16px 0px
|
||||||
|
|
||||||
|
span,
|
||||||
|
span:before,
|
||||||
|
span:after
|
||||||
|
cursor: pointer
|
||||||
|
border-radius: 1px
|
||||||
|
height: 5px
|
||||||
|
width: 35px
|
||||||
|
background: $nav-font-color
|
||||||
|
position: absolute
|
||||||
|
display: block
|
||||||
|
content: ''
|
||||||
|
transition: all 300ms ease-in-out
|
||||||
|
|
||||||
|
span:before
|
||||||
|
top: -10px
|
||||||
|
|
||||||
|
span:after
|
||||||
|
bottom: -10px
|
||||||
|
|
||||||
|
&.active span
|
||||||
|
background-color: transparent
|
||||||
|
&:before,
|
||||||
|
&:after
|
||||||
|
top: 0
|
||||||
|
|
||||||
|
&:before
|
||||||
|
transform: rotate(45deg)
|
||||||
|
|
||||||
|
&:after
|
||||||
|
transform: rotate(-45deg)
|
||||||
|
|
||||||
@@ -1,7 +1,7 @@
|
|||||||
$navtop: 20px
|
$navtop: 20px
|
||||||
$headerRadios: 2rem
|
$headerRadios: 2rem
|
||||||
|
|
||||||
@import 'nav', 'home', 'kalender', 'tueren', 'other', 'mobil'
|
@import 'nav2', 'home', 'kalender', 'tueren', 'other'
|
||||||
|
|
||||||
/* **************************************
|
/* **************************************
|
||||||
|
|
||||||
|
|||||||
49
tab/nav2.php
Normal file
49
tab/nav2.php
Normal file
@@ -0,0 +1,49 @@
|
|||||||
|
<section class="navigation">
|
||||||
|
<div class="nav-container">
|
||||||
|
<div class="brand">
|
||||||
|
<a href="#!">Mellys Weihnachts Kalender</a>
|
||||||
|
</div>
|
||||||
|
<nav>
|
||||||
|
<div class="nav-mobile"><a id="nav-toggle" href="#!"><span></span></a></div>
|
||||||
|
<ul class="nav-list">
|
||||||
|
<li>
|
||||||
|
<a href="?tab=home" <?php if ($tab == "home")?>>Home</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="?tab=galerie" <?php if ($tab == "galerie")?>>Galerie</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="?tab=radio" <?php if ($tab == "radio")?>>Musik</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="#!">Services</a>
|
||||||
|
<ul class="nav-dropdown">
|
||||||
|
<li>
|
||||||
|
<a href="#!">Web Design</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="#!">Web Development</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="#!">Graphic Design</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="#!">Portfolio</a>
|
||||||
|
<ul class="nav-dropdown">
|
||||||
|
<li>
|
||||||
|
<a href="#!">Web Design</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="#!">Web Development</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="#!">Graphic Design</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
Reference in New Issue
Block a user