Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 130fd1ee7b |
49
index.php
49
index.php
@@ -16,61 +16,26 @@ if ($tab == "") {$tab = "home";}
|
||||
<link rel="stylesheet" type="text/css" href="main/min-style.css">
|
||||
<script src="main/lightbox-plus-jquery.min.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="main/lightbox.min.css">
|
||||
</head>
|
||||
|
||||
<header>
|
||||
|
||||
<script src="main/nav2.js"></script>
|
||||
</head>
|
||||
|
||||
<!--header>
|
||||
|
||||
<h1>
|
||||
Mellys Weihnachts Kalender
|
||||
</h1>
|
||||
</header>
|
||||
</header-->
|
||||
|
||||
<!-- mobil sass--->
|
||||
<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>
|
||||
<?php include('tab/nav2.php');?>
|
||||
|
||||
|
||||
<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>
|
||||
|
||||
|
||||
|
||||
<article>
|
||||
<article>
|
||||
|
||||
<?php include('tab/'.$tab.'.php');?>
|
||||
|
||||
</article>
|
||||
</article>
|
||||
|
||||
<footer>
|
||||
<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
|
||||
$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