magical-css

<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://unpkg.com/magical-css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><link rel="icon" href="//palkerecsenyi.github.io/magic/documentation/media/icon.png" type="image/x-icon" /> <script defer src="https://use.fontawesome.com/releases/v5.0.3/js/all.js"></script> <link rel="stylesheet" href="../../prism.css"> <meta charset="UTF-8"> <title>Magic - Documentation</title> <script> function openNav(){ document.getElementById("nav-mobile").style.width = "100%"; } function closeNav(){ document.getElementById("nav-mobile").style.width = "0"; } </script> <script src="../../navbar.js"></script> <style> .doc-nav{position:static!important;}.doc-nav-post{margin-top:10px !important;} </style> </head> <body> <div id="nav-mobile" class="blue animate"> <a href="javascript:void(0)" class="close" onClick="closeNav()">×</a> <a href="https://palkerecsenyi.github.io/magic/">Home</a> <a href="https://palkerecsenyi.github.io/magic/start">Get Started</a> <a href="https://palkerecsenyi.github.io/magic/documentation">Documentation</a> <a href="https://github.com/palkerecsenyi/magic">Github</a> </div> <nav class="blue"> <ul class="nav-left"> <li><a href="/magic" class="nav-brand-text">Magic.CSS</a></li> <li class="nav-mobile-open" onClick="openNav()"><i class="fas fa-bars"></i></li> </ul> <ul class="nav-right"> <li class="nav-item"><a href="https://palkerecsenyi.github.io/magic/">Home</a></li> <li class="nav-item"><a href="https://palkerecsenyi.github.io/magic/start">Get Started</a></li> <li class="nav-item active"><a href="https://palkerecsenyi.github.io/magic/documentation">Documentation</a></li> <li class="nav-item"><a href="https://github.com/palkerecsenyi/magic">Github</a></li> </ul> </nav> <div class="navigation blue"> <div class="links"> <script>addNav(true,"navbar");</script> </div> </div> <div class="container"> <h1 class="header">Navbar</h1> <h2 class="trailer">A crucial component of any website: a 'sticky', customisable and responsive navbar.</h2> <hr class="separator"> <p>The vast majority of websites have at least some sort of navbar (navigation bar). Magic comes with some simple but powerful tools to build one. Here's an example:</p> </div> <nav class="blue doc-nav"> <ul class="nav-left"> <li><a href="/magic" class="nav-brand-text">Magic.CSS</a></li> <li class="nav-mobile-open" onClick="openNav()"><i class="fas fa-bars"></i></li> </ul> <ul class="nav-right"> <li class="nav-item"><a href="https://palkerecsenyi.github.io/magic/">Home</a></li> <li class="nav-item"><a href="https://palkerecsenyi.github.io/magic/start">Get Started</a></li> <li class="nav-item active"><a href="https://palkerecsenyi.github.io/magic/documentation">Documentation</a></li> <li class="nav-item"><a href="https://github.com/palkerecsenyi/magic">Github</a></li> </ul> </nav> <div class="container doc-nav-post"> <p>Looks familiar? Of course - it's on the top of every page within this website!</p> <div class="error info">By default, Navbars are fixed at the top of the page. The examples on this page have custom styles (not available in Magic) to stop them from moving to their normal position, for demostration purposes.</div> <h2>Simple navbar</h2> <p>To build a simple navbar, use the following code:</p> </div> <nav class="default doc-nav"> <ul class="nav-left"> <li><a href="#" class="nav-brand-text">My Website</a></li> </ul> <ul class="nav-right"> <li class="nav-item"><a href="#">Home</a></li> <li class="nav-item"><a href="#">About</a></li> <li class="nav-item"><a href="#">Contact</a></li> <li class="nav-item"><a href="#">Pricing</a></li> </ul> </nav> <div class="container doc-nav-post"> <pre><code class="language-html"><nav class="default"> <ul class="nav-left"> <li><a href="#" class="nav-brand-text">My Website</a></li> </ul> <ul class="nav-right"> <li class="nav-item"><a href="#">Home</a></li> <li class="nav-item"><a href="#">About</a></li> <li class="nav-item"><a href="#">Contact</a></li> <li class="nav-item"><a href="#">Pricing</a></li> </ul> </nav></code></pre> <p>On the first line, replace the <span class="i-code">default</span> class name with any <strong>standard</strong> Magic colour (all colours (including dark and light) except darkens and lightens). This will make several colours change automatically.</p> <h3>All colours</h3> </div> <nav class="default doc-nav"> <ul class="nav-left"> <li><a href="#" class="nav-brand-text">Default</a></li> </ul> <ul class="nav-right"> <li class="nav-item"><a href="#">Home</a></li> <li class="nav-item"><a href="#">About</a></li> <li class="nav-item"><a href="#">Contact</a></li> <li class="nav-item"><a href="#">Pricing</a></li> </ul> </nav> <nav class="red doc-nav"> <ul class="nav-left"> <li><a href="#" class="nav-brand-text">Red</a></li> </ul> <ul class="nav-right"> <li class="nav-item"><a href="#">Home</a></li> <li class="nav-item"><a href="#">About</a></li> <li class="nav-item"><a href="#">Contact</a></li> <li class="nav-item"><a href="#">Pricing</a></li> </ul> </nav> <nav class="green doc-nav"> <ul class="nav-left"> <li><a href="#" class="nav-brand-text">Green</a></li> </ul> <ul class="nav-right"> <li class="nav-item"><a href="#">Home</a></li> <li class="nav-item"><a href="#">About</a></li> <li class="nav-item"><a href="#">Contact</a></li> <li class="nav-item"><a href="#">Pricing</a></li> </ul> </nav> <nav class="yellow doc-nav"> <ul class="nav-left"> <li><a href="#" class="nav-brand-text">Yellow</a></li> </ul> <ul class="nav-right"> <li class="nav-item"><a href="#">Home</a></li> <li class="nav-item"><a href="#">About</a></li> <li class="nav-item"><a href="#">Contact</a></li> <li class="nav-item"><a href="#">Pricing</a></li> </ul> </nav> <nav class="blue doc-nav"> <ul class="nav-left"> <li><a href="#" class="nav-brand-text">Blue</a></li> </ul> <ul class="nav-right"> <li class="nav-item"><a href="#">Home</a></li> <li class="nav-item"><a href="#">About</a></li> <li class="nav-item"><a href="#">Contact</a></li> <li class="nav-item"><a href="#">Pricing</a></li> </ul> </nav> <nav class="dark doc-nav"> <ul class="nav-left"> <li><a href="#" class="nav-brand-text">Dark</a></li> </ul> <ul class="nav-right"> <li class="nav-item"><a href="#">Home</a></li> <li class="nav-item"><a href="#">About</a></li> <li class="nav-item"><a href="#">Contact</a></li> <li class="nav-item"><a href="#">Pricing</a></li> </ul> </nav> <nav class="light doc-nav"> <ul class="nav-left"> <li><a href="#" class="nav-brand-text">Light</a></li> </ul> <ul class="nav-right"> <li class="nav-item"><a href="#">Home</a></li> <li class="nav-item"><a href="#">About</a></li> <li class="nav-item"><a href="#">Contact</a></li> <li class="nav-item"><a href="#">Pricing</a></li> </ul> </nav> <div class="container doc-nav-post"> <div class="error info">You may also have noticed that navbars have a slight aesthetic shadow on the bottom. This typically looks nice on websites, but can be disabled by adding the <span class="i-code">no-shadow</span> class.</div> <h2>Navbar components</h2> <p>As you saw in the example code above, a navbar has two main sections: nav-left and nav-right. Below is an explanation of their uses and components.</p> <h3>nav-left</h3> <p>This section contains items that appear on the left side of the navbar. This typically contains two items.</p> <h4>Brand</h4> <p>One of the most important parts of a website is the 'brand' within the navbar. In Magic, this can either be text or an image. It is defined as a list item within the <span class="i-code">nav-left</span> unordered list. To make a textual navbar brand, use the following markup inside your navbar:</p> </div> <nav class="default doc-nav"> <ul class="nav-left"> <li><a href="#" class="nav-brand-text">My Brand</a></li> </ul> </nav> <div class="container doc-nav-post"> <pre><code class="language-html"><ul class="nav-left"> <li><a href="#" class="nav-brand-text">My Brand</a></li> </ul></code></pre> <p>Most websites, however, would want to add an image as their icon. This can be done with the following markup:</p> </div> <nav class="default doc-nav"> <ul class="nav-left"> <li><a href="#" class="nav-brand-container"> <img class="nav-brand-image" src="http://via.placeholder.com/350x150"> </a></li> </ul> </nav> <div class="container doc-nav-post"> <div class="error problem">The positioning of this icon may appear strange, but don't worry! This is because we haven't added any <span class="i-code">nav-right</span> section yet.</div> <h4>Hamburger menu</h4> <p>The other item found in the <span class="i-code">nav-left</span> section is the mobile 'hamburger' menu button. This is a button that opens a mobile navigation menu, and is only visible on mobile and tablet devices. The following markup adds the button (required FontAwesome):</p> <pre><code class="language-html"><ul class="nav-left"> <li><a href="/magic" class="nav-brand-text">Magic.CSS</a></li> <li class="nav-mobile-open" onClick="openNav()"><i class="fas fa-bars"></i></li> </ul></code></pre> <div class="error problem">Please note that the button does not yet do anything. To completely set up a mobile navbar, see the <a class="link" href="#mobile">responsive</a> section of this page.</div> <h3>nav-right</h3> <p>The <span class="i-code">nav-right</span> section contains links within an unordered list. It comes directly after the <span class="i-code">nav-right</span> section in your HTML. To create a simple set of links, use the following markup:</p> <pre><code class="language-html"><ul class="nav-right"> <li class="nav-item"><a href="#">Home</a></li> <li class="nav-item"><a href="#">About</a></li> <li class="nav-item"><a href="#">Contact</a></li> <li class="nav-item"><a href="#">Pricing</a></li> </ul> </code></pre> <h5>Active items</h5> <p>To make a navbar link appear 'active', just add the <span class="i-code">active</span> class to the <span class="i-code">nav-item</span>.</p> <h3>Where to put it</h3> <p>Your navbar markup must be the first thing within the <span class="i-code">body</span> of your website, outside of any container. For example:</p> <pre><code class="language-html"><body> <nav class="default"> <ul class="nav-left"> <li><a href="#" class="nav-brand-text">My Website</a></li> </ul> <ul class="nav-right"> <li class="nav-item"><a href="#">Home</a></li> <li class="nav-item"><a href="#">About</a></li> <li class="nav-item"><a href="#">Contact</a></li> <li class="nav-item"><a href="#">Pricing</a></li> </ul> </nav> <div class="container"> ...</code></pre> <h2 id="mobile">Responsive</h2> <p>Magic also has a variety of tools for making your navbar work well on tablet and mobile devices. There is a minimal amount of JS involved, as well as some additional markup. Firstly, add something like the following, <strong>before the main navbar</strong>:</p> <pre><code class="language-html"><div id="nav-mobile" class="default">  <a href="javascript:void(0)" class="close" onClick="closeNav()">&times;</a> <a href="#">Home</a> <a href="#">About</a> <a href="#">Contact</a> <a href="#">Pricing</a> </div></code></pre> <div class="error info">The links used here should typically be the same as within your normal navbar.</div> <p>Make sure that your main navbar contains something like <code class="language-html"><li class="nav-mobile-open" onClick="openNav()"><i class="fas fa-bars"></i></li></code>, with which mobile and tablet users can open your navbar.</p> <p>Next, add this to your page <span class="i-code">head</span>:</p> <pre><code class="language-html"><script>function openNav(){document.getElementById("nav-mobile").style.width = "100%";}function closeNav(){document.getElementById("nav-mobile").style.width = "0";}</script></code></pre> <p>That's it! You should have a functioning mobile navbar! This page also has one. If you are using a desktop device, you can test it out with the button below:</p> <a href="#" onclick="openNav(); return false;" class="btn btn-blue btn-fluid">Open navbar</a> <h3>Animation</h3> <p>You can also make the mobile navbar 'slide' rather than appear, by adding the <span class="i-code">animate</span> class to the div:</p> <a href="#" onclick="openAnimatedNav(); return false;" class="btn btn-blue btn-fluid">Open animated navbar</a> <h2>Dropdowns</h2> <p>To add a dropdown to your navbar, see the <a class="link lined" href="dropdown.html">Dropdown docs</a>. Here's a preview:</p> <nav class="blue doc-nav"> <ul class="nav-left"> <li class="nav-brand-container"><h1 class="nav-brand-text">Example Navbar</h1></li> </ul> <ul class="nav-right"> <li class="nav-item active"><a href="#">Home</a></li> <li class="nav-item"><a href="#">Contact</a></li> <li class="nav-item"><a href="#">About</a></li> <li class="nav-item"> <div class="nav-dropdown-container"> <a href="#" onClick="$('#dd4').toggleClass('active'); return false;">More <i class="fas fa-caret-down"></i></a> <div class="nav-dropdown" id="dd4"> <a href="#">Sign in</a> <a href="#">Sign up</a> <a href="#">My profile</a> <a href="#" class="red">Issues</a> </div> </div> </li> </ul> </nav> </div> <footer class="blue"> <div class="body"> <div class="content"> <h1>Magic.css</h1> <p>Neat and unique CSS framework for dynamic websites</p> </div> <div class="links"> <ul> <li class="header">Pages</li> <li><a href="/magic">Home</a></li> <li><a href="#">Start</a></li> <li><a href="https://github.com/palkerecsenyi/magic/">Github</a></li> </ul> </div> </div> <div class="bottom"> <p>© Magic 2018 | Magic.CSS <span class="version"></span><span class="right-float"><a onClick="$('html, body').animate({ scrollTop: 0 }, 'slow');return false;" href="#" class="link"><i class="fas fa-arrow-up"></i> Back to Top</a></span></p> </div> </footer> <script src="../../prism.js"></script> </body> </html>