mirror of
https://github.com/offen/website.git
synced 2024-12-23 13:30:20 +01:00
basic menu
This commit is contained in:
parent
a01067c66b
commit
412951e43c
66
homepage/theme/static/images/offen-logo-circle-only.svg
Normal file
66
homepage/theme/static/images/offen-logo-circle-only.svg
Normal file
@ -0,0 +1,66 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
width="42"
|
||||
height="46"
|
||||
viewBox="0 0 42 46"
|
||||
version="1.1"
|
||||
id="svg6"
|
||||
sodipodi:docname="logo_circle_only.svg"
|
||||
style="fill:none"
|
||||
inkscape:version="0.92.4 (5da689c313, 2019-01-14)">
|
||||
<metadata
|
||||
id="metadata12">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title></dc:title>
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<defs
|
||||
id="defs10" />
|
||||
<sodipodi:namedview
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1"
|
||||
objecttolerance="10"
|
||||
gridtolerance="10"
|
||||
guidetolerance="10"
|
||||
inkscape:pageopacity="0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:window-width="1172"
|
||||
inkscape:window-height="801"
|
||||
id="namedview8"
|
||||
showgrid="false"
|
||||
fit-margin-top="0"
|
||||
fit-margin-left="0"
|
||||
fit-margin-right="0"
|
||||
fit-margin-bottom="0"
|
||||
inkscape:zoom="3.6410256"
|
||||
inkscape:cx="-8.2881522"
|
||||
inkscape:cy="22.326311"
|
||||
inkscape:window-x="26"
|
||||
inkscape:window-y="46"
|
||||
inkscape:window-maximized="0"
|
||||
inkscape:current-layer="svg6" />
|
||||
<path
|
||||
d="m 19.276441,1.3473483 c -2.2159,0.30175 -4.4779,0.52622 -6.595,1.35358 -1.0136,0.39617 -1.866201,1.11675 -2.7768009,1.70895 -1.5390006,1.00085 -3.1546006,2.07393 -4.3754006,3.487139 -1.1417,1.32142 -1.9603,3.0340197 -2.5753,4.6773207 -0.7114,1.9009 -1.3553,3.9844 -1.6353,5.9988 -0.124,0.8919 -0.2932,1.7225 -0.186,2.6395 0.3569,3.0515 2.2887,4.9768 4.8381,6.2667 1.5488,0.7837 2.8722996,1.2135 4.6281005,1.0314 0.621301,-0.0643 1.230501,-0.2427 1.851201,-0.3208 0.8201,-0.1031 1.7568,-0.1157 2.5454,-0.367 0.5442,-0.1735 0.9908,-0.5207 1.5042,-0.7585 1.2937,-0.5994 2.555,-1.1598 3.8181,-1.8339 1.4557,-0.7767 3.0626,-1.3912 4.3967,-2.397 1.7486,-1.3183 3.1253,-3.567 4.0356,-5.5801 0.312,-0.6895 0.4481,-1.4299 0.6415,-2.1596 0.7111,-2.6844 0.9941,-5.5306008 -0.0881,-8.1584397 -0.4946,-1.20121 -1.2803,-2.08832 -2.1593,-2.99943 -0.5973,-0.61908 -1.2121,-1.23468 -1.9669,-1.64812 -0.864,-0.47319 -1.9443,-0.61908 -2.8926,-0.78993 -1.0019,-0.18044 -1.9862,-0.28962 -3.0082,-0.15057 z"
|
||||
id="path2"
|
||||
style="fill:#ffffff;fill-opacity:1"
|
||||
inkscape:connector-curvature="0" />
|
||||
<path
|
||||
d="m 33.623441,3.5069283 c 0.2075,0.74662 0.5951,1.43745 0.8737,2.15959 0.5239,1.35802 0.9089,2.7594693 1.1599,4.1992188 0.6207,3.5627009 0.2796,7.5006009 -0.8783,10.9179009 -0.6146,1.8142 -1.5181,3.5229 -2.2616,5.279 -1.1793,2.7855 -2.1707,5.642 -4.6788,7.4643 -0.4991,0.3626 -1.0758,0.5198 -1.6198,0.7883 -1.548,0.7639 -3.3823,1.5164 -5.0909,1.7938 -0.6133,0.0995 -1.2273,-0.1443 -1.8512,-0.0523 -2.2777,0.3358 -4.378,0.8388 -6.7107,0.673 -2.6202009,-0.1862 -5.3462015,-0.978 -7.6363015,-2.3196 -0.7559,-0.4429 -1.4925,-0.9148 -2.1983,-1.4402 -0.5346,-0.398 -1.0103,-0.8809 -1.6198,-1.1484 0.4403,1.0243 1.3596,1.5934 2.0625,2.4 1.5986,1.8343 3.2048,3.6538 4.997,5.2941 1.8644005,1.7065 3.6050015,3.8444 6.0148015,4.7417 1.4823,0.552 2.9617,0.6623 4.5123,0.7724 1.2934,0.0918 2.6351,0.2234 3.9339,0.0887 2.4565,-0.2546 4.8505,-1.3431 7.0578,-2.4234 1.7385,-0.851 3.4437,-1.6671 4.8397,-3.0959 2.4924,-2.5506 4.0232,-5.5257 5.3187,-8.8574 0.7381,-1.8979 1.425,-3.8223 1.6233,-5.8789 0.1291,-1.3381 -0.0671,-2.8617 -0.1919,-4.1992 -0.2546,-2.7267 -0.8131,-5.2689 -1.8562,-7.7985 -0.6046,-1.4661 -1.4291,-2.786001 -2.1093,-4.1992005 -0.6191,-1.2863892 -1.3547,-2.4608392 -2.2002,-3.5993092 -0.4307,-0.58008 -0.8384,-1.23708 -1.4903,-1.5597 z"
|
||||
id="path4"
|
||||
style="fill:#ffffff;fill-opacity:1"
|
||||
inkscape:connector-curvature="0" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.0 KiB |
19
homepage/theme/static/scripts/functions.js
Normal file
19
homepage/theme/static/scripts/functions.js
Normal file
@ -0,0 +1,19 @@
|
||||
/** code by webdevtrick ( https://webdevtrick.com ) **/
|
||||
(function($) {
|
||||
$(function() {
|
||||
$('nav ul li a:not(:only-child)').click(function(e) {
|
||||
$(this).siblings('.nav-dropdown').toggle();
|
||||
$('.dropdown').not($(this).siblings()).hide();
|
||||
e.stopPropagation();
|
||||
});
|
||||
$('html').click(function() {
|
||||
$('.nav-dropdown').hide();
|
||||
});
|
||||
$('#nav-toggle').click(function() {
|
||||
$('nav ul').slideToggle();
|
||||
});
|
||||
$('#nav-toggle').on('click', function() {
|
||||
this.classList.toggle('active');
|
||||
});
|
||||
});
|
||||
})(jQuery);
|
||||
@ -9,8 +9,52 @@
|
||||
<body>
|
||||
|
||||
<div class='menu'>
|
||||
|
||||
<!--- MENU start -->
|
||||
<div class='desktop_width'>
|
||||
MENU
|
||||
<section class="nav-bar">
|
||||
<div class="nav-container">
|
||||
<div class="brand">
|
||||
<a href="#"><img src="/theme/images/offen-logo-circle-only.svg" alt="offen logo" width="42" height="46" class="logo"></a>
|
||||
</div>
|
||||
<nav>
|
||||
<div class="nav-mobile"><a id="nav-toggle" href="#!"><span></span></a></div>
|
||||
<ul class="nav-list">
|
||||
<li>
|
||||
<a href="#">Deep dive</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Status</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Auditorium</a>
|
||||
<ul class="nav-dropdown">
|
||||
<li>
|
||||
<a href="#">for Operators</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">for Users</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">for Users</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#!">Contact</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#!">Get involved</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Support Us</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</section>
|
||||
<!--- MENU end -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class='intro'>
|
||||
@ -43,5 +87,8 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
|
||||
<script src="/theme/scripts/functions.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
202
styles/index.css
202
styles/index.css
@ -1,3 +1,196 @@
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: #fff;
|
||||
color: #898989;
|
||||
font: 18px/1.5 "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 18px;
|
||||
line-height: 1.5;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* ---------------------------------------------------
|
||||
MENU
|
||||
----------------------------------------------------*/
|
||||
|
||||
.nav-bar {
|
||||
height: 70px;
|
||||
}
|
||||
|
||||
.brand {
|
||||
position: absolute;
|
||||
padding: 12px 0 0 20px;
|
||||
float: left;
|
||||
line-height: 70px;
|
||||
}
|
||||
/*
|
||||
.brand a img {
|
||||
max-height: 70px;
|
||||
}
|
||||
*/
|
||||
.brand a,
|
||||
.brand a:visited {
|
||||
color: #39352A;
|
||||
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: #F7BF08;
|
||||
color: #39352A;
|
||||
text-decoration: none;
|
||||
}
|
||||
nav ul li a:hover,
|
||||
nav ul li a:visited:hover {
|
||||
/*
|
||||
background: #FDE28C;
|
||||
*/
|
||||
color: #39352A;
|
||||
}
|
||||
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: 140px;
|
||||
}
|
||||
nav ul li ul li a {
|
||||
padding: 15px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.nav-dropdown {
|
||||
position: absolute;
|
||||
display: none;
|
||||
z-index: 1;
|
||||
}
|
||||
.nav-mobile {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
background: #F7BF08;
|
||||
height: 70px;
|
||||
width: 70px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 960px) {
|
||||
.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;
|
||||
padding-left: 25%;
|
||||
|
||||
}
|
||||
nav ul li ul li a {
|
||||
padding-left: 30%;
|
||||
}
|
||||
|
||||
.nav-dropdown {
|
||||
position: static;
|
||||
}
|
||||
.brand a img {
|
||||
/*
|
||||
max-height: 60px;
|
||||
margin-top: 5px;
|
||||
*/
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 961px) {
|
||||
.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: 3px;
|
||||
width: 35px;
|
||||
background: #39352A;
|
||||
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;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* ---------------------------------------------------
|
||||
LAYOUT
|
||||
----------------------------------------------------*/
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
@ -11,20 +204,18 @@
|
||||
|
||||
.menu {
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
height: 70px;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
background-color: #F7BF08;
|
||||
border: 1px solid #000;
|
||||
}
|
||||
|
||||
.intro {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
margin-top: 80px;
|
||||
margin-top: 70px;
|
||||
background-color: #F7BF08;
|
||||
border: 1px solid #000;
|
||||
}
|
||||
|
||||
.content {
|
||||
@ -52,8 +243,7 @@
|
||||
.footer {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
background-color: #ccc;
|
||||
border: 1px solid #000;
|
||||
background-color: #39352A;
|
||||
}
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user