images, download page & rwd
This commit is contained in:
janis
@@ -1,5 +1,5 @@
|
||||
# impress.js.org website
|
||||
This folder contains all the code for the impress.js.org website. You can find the source code for the demo presentation and the other examples in the folder *demo*.
|
||||
This folder contains all the code for the [impress.js.org](https://impress.js.org) website. You can find the source code for the demo presentation and the other examples in the folder *demo*.
|
||||
|
||||
## Structure
|
||||
The also contains a folder for the docs (Documentation) for the project.
|
||||
@@ -11,4 +11,6 @@ What needs to be done:
|
||||
- Find good font
|
||||
- Create good background image for main page
|
||||
- use jQuery and maybe some other tools to do crazy CSS scroll animations
|
||||
- Create nav bar
|
||||
|
||||
## Docs
|
||||
If you want to contribute more documentation, then you may create a new MarkDown file in the docs/md folder, where all markdown files for the documentation reside. After you have written your documentation, you should run ```node build-docs.js``` to create the navigation menu entries. The title specified in the md file will be set as the navigation name. You may then change the navigation items in /docs/modules/nav.html
|
||||
BIN
website/assets/apple-touch-icon.png
Normal file
BIN
website/assets/apple-touch-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
|
Before Width: | Height: | Size: 364 KiB After Width: | Height: | Size: 364 KiB |
76
website/css/footerstyle.css
Normal file
76
website/css/footerstyle.css
Normal file
@@ -0,0 +1,76 @@
|
||||
/*
|
||||
*
|
||||
* footerstyle.css - impress.js Website
|
||||
*
|
||||
* Created 2023 by Janis Hutz
|
||||
*
|
||||
*/
|
||||
|
||||
/* Style the footer box */
|
||||
|
||||
.footer-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: blue;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.footer-logo-container {
|
||||
margin: 0.5%;
|
||||
height: 45%;
|
||||
display: inline-block;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.footer-logo {
|
||||
display: block;
|
||||
width: auto;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.footer-wrapper {
|
||||
width: 70%;
|
||||
height: 45%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.footer-big {
|
||||
font-size: 1.6rem;
|
||||
margin: 1%;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.footer-small {
|
||||
margin: 1%;
|
||||
font-size: 1.2rem
|
||||
}
|
||||
|
||||
.credits {
|
||||
margin-top: 2%;
|
||||
color: gray;
|
||||
text-decoration: none;
|
||||
font-style: italic;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 999px) {
|
||||
.footer-container {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.footer-wrapper {
|
||||
height: 80%;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.footer-logo-container {
|
||||
height: 60%;
|
||||
}
|
||||
}
|
||||
@@ -1,36 +1,137 @@
|
||||
.Topmenu {
|
||||
width: 101vw;
|
||||
padding: 0.3%;
|
||||
/*
|
||||
*
|
||||
* menustyle.css - impress.js Website
|
||||
*
|
||||
* Created 2023 by Janis Hutz
|
||||
*
|
||||
*/
|
||||
|
||||
/*
|
||||
Default rules that are set for mobile interfaces
|
||||
*/
|
||||
.nav-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: blue;
|
||||
margin-left: -1%;
|
||||
margin-top: -1%;
|
||||
}
|
||||
|
||||
.menubody {
|
||||
width: 90%;
|
||||
margin-top: 1.5%;
|
||||
margin-left: 5%;
|
||||
}
|
||||
|
||||
.Menu {
|
||||
.toggle-wrapper {
|
||||
display: inline-flex;
|
||||
height: 100%;
|
||||
width: 80%;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
|
||||
/* Logo image and logo link (aka logo-container)*/
|
||||
.logo-container {
|
||||
margin: 0.5%;
|
||||
height: 80%;
|
||||
display: inline-block;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.mobile-wrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
list-style-type: none;
|
||||
width: 80vw;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: block;
|
||||
width: auto;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.mainitems {
|
||||
padding: 1%;
|
||||
}
|
||||
|
||||
.mainitems:hover {
|
||||
background-color: darkblue;
|
||||
}
|
||||
|
||||
.menubutton {
|
||||
.listtoggle {
|
||||
text-decoration: none;
|
||||
background-color: none;
|
||||
color: white;
|
||||
}
|
||||
color: black;
|
||||
font-size: 5vh;
|
||||
margin-right: 7%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.active {
|
||||
color: rgba(184, 214, 240, 1);
|
||||
}
|
||||
|
||||
/* Nav menu holder (contains the flex nav menu and has to exist because of jQuery */
|
||||
.nav-menu {
|
||||
background-color: rgba(245, 245, 245, 0.9);
|
||||
display: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* This is the list actually containing the menu items */
|
||||
.nav-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.navitem {
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
color: black;
|
||||
font-size: 1.3rem;
|
||||
padding: 2%;
|
||||
width: 100%;
|
||||
}
|
||||
/*
|
||||
.navitem:hover {
|
||||
background-color: rgba(184, 214, 240, 1);
|
||||
}*/
|
||||
|
||||
|
||||
/*
|
||||
Media queries to optimise for desktop
|
||||
*/
|
||||
@media only screen and (min-width: 999px) {
|
||||
/* Top navigation bar container */
|
||||
.nav-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* div containing the nav-menu unordered list */
|
||||
.nav-wrapper {
|
||||
height: 100%;
|
||||
width: 80%;
|
||||
margin: auto;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.listtoggle, .toggle-wrapper {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nav-menu {
|
||||
display: flex;
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
.nav-list {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.mobile-wrapper {
|
||||
width: fit-content;
|
||||
margin-left: 3%;
|
||||
}
|
||||
|
||||
.navitem {
|
||||
font-size: 0.9rem;
|
||||
width: fit-content;
|
||||
padding: 1%;
|
||||
padding-left: 2%;
|
||||
padding-right: 2%
|
||||
}
|
||||
}
|
||||
|
||||
@@ -7,6 +7,14 @@
|
||||
*
|
||||
*/
|
||||
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: calc(14pt + 0.4vw);
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #dcdcdc;
|
||||
/*TODO: Choose better font*/
|
||||
@@ -25,14 +33,18 @@ body {
|
||||
/* This is the tile element with the background image and the title */
|
||||
|
||||
.title {
|
||||
/* TODO: Add background image*/
|
||||
/* make div full width (well technically oversized and move it to -1% offset */
|
||||
display: block;
|
||||
width: 101vw;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 120vh;
|
||||
margin-top: -0.5vh;
|
||||
margin-left: -0.5vw;
|
||||
text-align: center;
|
||||
font-size: 2.5rem;
|
||||
background-image: url("/assets/main_bg_cut.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
}
|
||||
|
||||
.title-content {
|
||||
@@ -43,14 +55,28 @@ body {
|
||||
|
||||
.title-buttons {
|
||||
position: relative;
|
||||
font-size: 1.3rem;
|
||||
top: 30vh;
|
||||
}
|
||||
|
||||
.type-animation {
|
||||
font-size: 600%;
|
||||
.heading {
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.subheading {
|
||||
color: white !important;
|
||||
font-size: 1.7rem !important;
|
||||
}
|
||||
|
||||
#navbar {
|
||||
height: 15vh;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#footer {
|
||||
height: 70vh;
|
||||
}
|
||||
|
||||
/*
|
||||
*
|
||||
@@ -61,10 +87,10 @@ body {
|
||||
/* Buttons */
|
||||
.button {
|
||||
display: inline-block;
|
||||
background-color: green;
|
||||
background-color: rgba(0, 128, 0, 1);
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
font-size: 150%;
|
||||
font-size: 1.2rem;
|
||||
margin: 5px;
|
||||
font-weight: bold;
|
||||
padding: 30px;
|
||||
@@ -73,10 +99,6 @@ body {
|
||||
border-radius: 50px;
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
background-color: lightgreen;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*
|
||||
@@ -101,14 +123,22 @@ body {
|
||||
background-color: aqua;
|
||||
}
|
||||
|
||||
.features {
|
||||
.centered {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.feature-item {
|
||||
display: inline-block;
|
||||
width: 40%;
|
||||
margin: 2%;
|
||||
.sidebyside {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.sidebyside-element {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
@@ -123,4 +153,21 @@ body {
|
||||
|
||||
.big-text {
|
||||
font-size: 200%;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 999px) {
|
||||
#footer {
|
||||
height: 40vh;
|
||||
}
|
||||
|
||||
.sidebyside {
|
||||
width: 100%;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.sidebyside-element {
|
||||
width: 40%;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Docs - impress.js</title>
|
||||
<!--I am using jquery for button animations and loading of the different docPages.-->
|
||||
<script defer src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
|
||||
<script>console.log(location.href)</script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="content">
|
||||
<div id="nav"></div>
|
||||
<div id="docPage"></div>
|
||||
<div id="footer"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,40 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Download impress.js</title>
|
||||
<meta name="description" content="Download impress.js, a javascript presentation framework that uses the power of CSS 3 to create stunning presentations in your browser! It is inspired by the idea behind prezi.com">
|
||||
<link rel="stylesheet" href="/css/style.css">
|
||||
<!--I am using jquery for button animations (plus loading of the navbar and footer)-->
|
||||
<script defer src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
|
||||
<script defer src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js" crossorigin="anonymous" referrerpolicy="no-referrer" ></script>
|
||||
<script defer src="/js/index.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="navbar"></div>
|
||||
<div class="title">
|
||||
<div class="title-content">
|
||||
<h1 class="heading">Download impress.js</h1>
|
||||
<h2 class="subheading">Ready to bring your presentations to the next level?</h2>
|
||||
</div>
|
||||
<div class="title-buttons">
|
||||
<a class="button" id="demobutton" href="/demo/">Watch the demo</a>
|
||||
<a class="button go-impress" href="/docs/gettingStarted.html">Get started!</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="centered">
|
||||
<h3>Choose your download option!</h3>
|
||||
<!--TODO: Add a direct download link for the file-->
|
||||
<div class="sidebyside">
|
||||
<a class="button download-base" href="https://cdn.jsdelivr.net/gh/impress/impress.js@2.0.0/js/impress.js">From cdn (jsdelivr.net)</a>
|
||||
<a class="button download-base" href="https://github.com/impress/impress.js/blob/v2.0.0/js/impress.js">Full JavaScript File</a>
|
||||
<a class="button download-base" href="https://github.com/impress/impress.js/">Full source code</a>
|
||||
<a class="button download-base" href="https://www.npmjs.com/package/impress.js">npmjs</a>
|
||||
</div>
|
||||
<p>Note: The cdn link can be included directly in the HTML file of your presentation. See <a href="/docs/gettingStarted.html">here</a> for more info!</p>
|
||||
</div>
|
||||
<br><br><br>
|
||||
</div>
|
||||
<div id="footer"></div>
|
||||
</body>
|
||||
</html>
|
||||
17
website/footer.html
Normal file
17
website/footer.html
Normal file
@@ -0,0 +1,17 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<link rel="stylesheet" href="/css/footerstyle.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="footer-container">
|
||||
<div class="footer-logo-container"><img src="/assets/apple-touch-icon.png" alt="impress.js logo" class="footer-logo"></div>
|
||||
<div class="footer-wrapper">
|
||||
<p class="footer-big">impress.js</p>
|
||||
<p class="footer-small">The stunning javascript presentation framework</p>
|
||||
<a href="https://janishutz.com" class="credits">Created with ♥ by Janis Hutz</a>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -3,19 +3,12 @@
|
||||
<head>
|
||||
<title>impress.js - the stunning javascript presentation framework</title>
|
||||
<meta name="description" content="impress.js, a javascript presentation framework that uses the power of CSS 3 to create stunning presentations in your browser! It is inspired by the idea behind prezi.com">
|
||||
<link rel="stylesheet" href="./css/style.css">
|
||||
<link rel="stylesheet" href="./css/dark_hljs.css">
|
||||
<!--I am using jquery for the fancy typing animation and button animations (plus loading of the navbar and footer)-->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
|
||||
<script src="./js/index.js"></script>
|
||||
|
||||
<style>
|
||||
.title {
|
||||
background-image: url("main_bg_cut.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100%;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="/css/style.css">
|
||||
<link rel="stylesheet" href="/css/dark_hljs.css">
|
||||
<!--I am using jquery for button animations (plus loading of the navbar and footer)-->
|
||||
<script defer src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
|
||||
<script defer src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js" crossorigin="anonymous" referrerpolicy="no-referrer" ></script>
|
||||
<script defer src="/js/index.js"></script>
|
||||
<!--I will be using highlight.js to highlight the syntax, but I still need to figure out how to use it.-->
|
||||
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js" integrity="sha512-bgHRAiTjGrzHzLyKOnpFvaEpGzJet3z4tZnXGjpsCcqOnAH6VGUx9frc5bcIhKTVLEiCO6vEhNAgx5jtLUYrfA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>-->
|
||||
</head>
|
||||
@@ -24,14 +17,13 @@
|
||||
<div id="navbar"></div>
|
||||
<div class="title">
|
||||
<div class="title-content">
|
||||
<h1 class="type-animation">impress.js</h1>
|
||||
<h1 class="heading">impress.js</h1>
|
||||
</div>
|
||||
<div class="title-buttons">
|
||||
<a class="button" id="demobutton" href="./demo/index.html">Watch the demo</a>
|
||||
<a class="button" id="demobutton" href="/demo/">Watch the demo</a>
|
||||
<br>
|
||||
<a class="button go-impress" href="./docs/gettingStarted.html">Get started!</a>
|
||||
<!--TODO: Add a direct download link for the file-->
|
||||
<a class="button download-base" href="./download.html">Download</a>
|
||||
<a class="button go-impress" href="/docs/gettingStarted.html">Get started!</a>
|
||||
<a class="button download-base" href="/download.html">Download</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
@@ -49,22 +41,26 @@
|
||||
|
||||
<!--FEATURE OVERVIEW-->
|
||||
|
||||
<div class="features">
|
||||
<div class="feature-item">
|
||||
<h3>FULL power of CSS.</h3>
|
||||
<p>Use the powerful styling tools CSS offers with only minimal restrictions. Because a tool should not restrict your options, such that the only limit is your imagination. (And your skills in CSS)</p>
|
||||
<div class="centered">
|
||||
<div class="sidebyside">
|
||||
<div class="sidebyside-element">
|
||||
<h3>FULL power of CSS.</h3>
|
||||
<p>Use the powerful styling tools CSS offers with only minimal restrictions. Because a tool should not restrict your options, such that the only limit is your imagination. (And your skills in CSS)</p>
|
||||
</div>
|
||||
<div class="sidebyside-element">
|
||||
<h3>Familiar.</h3>
|
||||
<p>impress.js presentations can be written in HTML with only a few simple to understand element attributes. Highly detailed Documentation helps you in getting started!</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="feature-item">
|
||||
<h3>Familiar.</h3>
|
||||
<p>impress.js presentations can be written in HTML with only a few simple to understand element attributes. Highly detailed Documentation helps you in getting started!</p>
|
||||
</div>
|
||||
<div class="feature-item">
|
||||
<h3>Minimalist.</h3>
|
||||
<p>The framework only delivers what is essential, without compromising on functionality. You can expand on its functionality by writing some more javascript code or by using more CSS transitions and transforms.</p>
|
||||
</div>
|
||||
<div class="feature-item">
|
||||
<h3>Plugins.</h3>
|
||||
<p>It features extensive plugin-support to expand on its core functionality. Want a speaker console? Blank the screen? There's a plugin for it. If not, you may add your own!</p>
|
||||
<div class="sidebyside">
|
||||
<div class="sidebyside-element">
|
||||
<h3>Minimalist.</h3>
|
||||
<p>The framework only delivers what is essential, without compromising on functionality. You can expand on its functionality by writing some more javascript code or by using more CSS transitions and transforms.</p>
|
||||
</div>
|
||||
<div class="sidebyside-element">
|
||||
<h3>Plugins.</h3>
|
||||
<p>It features extensive plugin-support to expand on its core functionality. Want a speaker console? Blank the screen? There's a plugin for it. If not, you may add your own!</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -74,19 +70,19 @@
|
||||
<h2 class="big-text">Impressed?</h2>
|
||||
<h3>Then you should try impress.js</h3>
|
||||
<p>*no rhyme intended</p>
|
||||
<a class="button go-impress" href="./docs/gettingStarted.html">Get started!</a>
|
||||
<a class="button go-impress" href="/docs/gettingStarted.html">Get started!</a>
|
||||
<!--TODO: Add a direct download link for the file-->
|
||||
<a class="button download-base" href="./download.html">Download</a>
|
||||
<a class="button download-base" href="/download.html">Download</a>
|
||||
</div>
|
||||
|
||||
<div class="more-info">
|
||||
<h2>Want to get more documentation or examples?</h2>
|
||||
<p>Then check out our <a href="./docs/home.html">documentation</a> and <a href="./demo/examples/index.html">examples</a></p>
|
||||
<p>Then check out our <a href="/docs">documentation</a> and <a href="/demo/examples/">examples</a></p>
|
||||
</div>
|
||||
|
||||
<div class="contributing">
|
||||
<h2>Want to help develop this project?</h2>
|
||||
<p>Then you should head over to our GitHub and take a look at our contributing Documentation and guidelines which you can find <a href=./docs/contributing/gettingStarted.html>here</a></p>
|
||||
<p>Then you should head over to our GitHub and take a look at our contributing Documentation and guidelines which you can find <a href=/docs/contributing/gettingStarted.html>here</a></p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="footer"></div>
|
||||
|
||||
0
website/js/docs/loadDocPage.js
Normal file
0
website/js/docs/loadDocPage.js
Normal file
@@ -1,6 +1,15 @@
|
||||
$(document).ready(function () {
|
||||
$('#navbar').load('nav.html')
|
||||
console.log("ok")
|
||||
$( document ).ready( function () {
|
||||
$( '#navbar' ).load( 'nav.html' );
|
||||
$( '#footer' ).load( 'footer.html' );
|
||||
|
||||
//
|
||||
$( document ).ready(function () {
|
||||
$( '.button' ).mouseenter( function () {
|
||||
$( this ).stop();
|
||||
$( this ).animate( { 'background-color':'rgba(65, 211, 65, 1)', 'border-radius': '0px' }, 200 );
|
||||
});
|
||||
$( '.button' ).mouseleave( function () {
|
||||
$( this ).stop();
|
||||
$( this ).animate( { 'background-color':'rgba(0, 128, 0, 1)', 'border-radius': '500px' }, 200 );
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -1,18 +1,59 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<link rel="stylesheet" href="css/menustyle.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="Topmenu">
|
||||
<div class="menubody">
|
||||
<a href="/"><img class="logo" src="../apple-touch-icon.png"></a>
|
||||
<ul class="Menu">
|
||||
<li class="mainitems"><a class="menubutton" id="docs" href="docs/index.html">Documentation</a></li>
|
||||
<li class="mainitems"><a class="menubutton" id="download" href="download.html">Download</a></li>
|
||||
<li class="mainitems"><a class="menubutton" href="https://github.com/impress/impress.js">GitHub</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<head>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<link rel="stylesheet" href="./css/menustyle.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="nav-container">
|
||||
<div class="mobile-wrapper">
|
||||
<a class="logo-container" href="/"><img class="logo" src="/assets/apple-touch-icon.png" alt="impress-logo"></a>
|
||||
<div class="toggle-wrapper">
|
||||
<a class="listtoggle" onclick="togglelist()">☰</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-wrapper">
|
||||
<div class="nav-menu">
|
||||
<div class="nav-list">
|
||||
<a class="navitem" id="docs" href="/docs">Documentation</a>
|
||||
<a class="navitem" id="download" href="/download.html">Download</a>
|
||||
<a class="navitem" id="gh" href="https://github.com/impress/impress.js">GitHub</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
$('.navitem').mouseenter( function () {
|
||||
if ( window.location.pathname.slice( 1, window.location.pathname.length ) == this.id ) {} else {
|
||||
$(this).stop();
|
||||
$(this).animate( { "color":"rgba(184, 214, 240, 1)", "background-color":"rgba(0, 0, 175, 1)" }, 200);
|
||||
};
|
||||
});
|
||||
$('.navitem').mouseleave( function () {
|
||||
if ( window.location.pathname.slice( 1, window.location.pathname.length ) == this.id ) {} else {
|
||||
$(this).stop();
|
||||
$(this).animate( { "color":"black", "background-color":"rgba(0, 0, 0, 0)" }, 200 );
|
||||
};
|
||||
});
|
||||
});
|
||||
|
||||
let previous = 1;
|
||||
function togglelist() {
|
||||
$( '.nav-menu' ).slideToggle(300);
|
||||
$( '.listtoggle' ).toggleClass( 'active' );
|
||||
}
|
||||
|
||||
window.addEventListener( 'resize', function( event ) {
|
||||
if ( $(window).width() > 999 ) {
|
||||
$( '.nav-menu' ).slideDown();
|
||||
previous = 1;
|
||||
} else if ( $(window).width() < 999 && previous == 1 ) {
|
||||
$( '.nav-menu' ).slideUp();
|
||||
$( '.listtoggle' ).removeClass( 'active' );
|
||||
previous = 0;
|
||||
};
|
||||
}, true);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user