Nathan Steel
3 years ago
commit
4f3dee855f
@ -0,0 +1,62 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Burger menu, who dis? I've added a burger menu to the site, and figured I'd write a piece about it as it's currently the only 'advanced' piece of funtionality that exists here.">
|
||||
<meta name="author" content="Nathan (Aney) Steel">
|
||||
<meta name="theme-color" content="white">
|
||||
<meta name="theme-color" content="black">
|
||||
<link rel="stylesheet" type="text/css" href="/main.css">
|
||||
<link rel="icon" type="image/png" href="/images/favicon.svg">
|
||||
<title>Hello, Burger menu!</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<h1>Hello, Burger menu!</h1>
|
||||
<input id="burger-toggle" type="checkbox"/>
|
||||
<label class="burger-container" for="burger-toggle"><div class="burger"></div></label>
|
||||
<hr/>
|
||||
<nav>
|
||||
<a href="/">home</a>
|
||||
<a href="/about.html">about</a>
|
||||
<a href="/projects.html">projects</a>
|
||||
<a href="/blog/">blog</a>
|
||||
<a href="/sitemap.html">misc</a>
|
||||
<a href="/support.html">support</a>
|
||||
</nav>
|
||||
<hr/>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<section>
|
||||
<p class="intro">On Friday 18th of November 2022, I released version 0.8.0 of this website. With that a large, and very noticable change occured. The addition of a burger menu.</p>
|
||||
|
||||
<h2>What is a burger menu?</h2>
|
||||
<p>A burger menu is simply a type of navigational menu. It's typically hidden by default with just a visible icon, but when (the icon is) clicked the navigational content becomes visible, and accessible.</p>
|
||||
<h3>Why is it called a burger menu?</h3>
|
||||
<p>The name burger/hamburger comes from the appearance of the icon. It consists of 3 horizontal lines, ordered vertically, so at a glance it sort of looks like the top of a bun, a patty, and the bottom of a bun.</p>
|
||||
|
||||
<h2>Why add a burger menu?</h2>
|
||||
<p>Simple, I wasn't a fan of how the site showed the navigational menu on mobiles. I felt it took up too much of the screen real estate, and the requirement for some users to scroll down to get to the content is terrible design. With the implimentation of the burger menu I believe the site looks much cleaner, with a better user-experience on mobiles. So an overall great success, all without losing any navigational control.</p>
|
||||
|
||||
<h2>CSS only</h2>
|
||||
<p>Unlike many of the burger menus you'll spot in the wild, the burger menu on my site is written with pure CSS. It makes use of a checkbox input for toggling, so those of you with Javascript disabled can still benefit from the better user experience.</p>
|
||||
<p>The only downside to this is in the case that CSS doesn't load, as there will be a random visible checkbox atop of the navigation.</p>
|
||||
|
||||
<h2>What? I don't see it?</h2>
|
||||
<p>This could be one of two reasons, your browser isn't small enough (try resizing it), or you've got the old CSS cached. If you've got the old CSS you'll notice the random checkbox I mentioned, try hitting CTRL+F5 to perform a hard-reload.</p>
|
||||
|
||||
<h2>Inspiration</h2>
|
||||
<p>Like many things, I started by googling similar implementations, and found this <a href="https://codepen.io/alvarotrigo/pen/MWEJEWG" target="_blank" rel="noopener">snippet by Alvaro</a>. I used this as the starting point, stripping it down, and making my own changes to make it work for my site in a way I liked.</p>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<hr/>
|
||||
<p>Written by <a href="https://aney.co.uk" target="_blank" rel="noopener">@aney</a> with <a href="https://danluu.com/web-bloat/" target="_blank" rel="noopener">web bloat</a> in mind | <a href="https://github.com/Aney/website" target="_blank" rel="noopener">Source Code</a></p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -0,0 +1,130 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Following on from the previous guide, this will cover creating a website from the single webpage we currently have. Links, additional design, all the shebang.">
|
||||
<meta name="author" content="Nathan (Aney) Steel">
|
||||
<meta name="theme-color" content="white">
|
||||
<meta name="theme-color" content="black">
|
||||
<link rel="stylesheet" type="text/css" href="/main.css">
|
||||
<link rel="icon" type="image/png" href="/images/favicon.svg">
|
||||
<title>Webpage to website</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<h1>Webpage to website</h1>
|
||||
<input id="burger-toggle" type="checkbox"/>
|
||||
<label class="burger-container" for="burger-toggle"><div class="burger"></div></label>
|
||||
<hr/>
|
||||
<nav>
|
||||
<a href="/">home</a>
|
||||
<a href="/about.html">about</a>
|
||||
<a href="/projects.html">projects</a>
|
||||
<a href="/blog/">blog</a>
|
||||
<a href="/sitemap.html">misc</a>
|
||||
<a href="/support.html">support</a>
|
||||
</nav>
|
||||
<hr/>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<section>
|
||||
<p>With a <a href="/guides/your-first-webpage.html">basic webpage</a> now created, the next hurdle is to add multiple pages, and get them all linked together into a website of some sort.</p>
|
||||
|
||||
<h2>Create a new page</h2>
|
||||
<p>First off we need a second page, with its own unique name. Let's call it <strong>about.html</strong>.</p>
|
||||
<p>To quickly get this up, copy and paste the <strong>index.html</strong> file from the previous guide, and simply rename it.</p>
|
||||
|
||||
<h2>Link the pages</h2>
|
||||
<p>Next up, creating our links. We're going the <em>traditional</em> route, with a navbar. So at the top of the body tag, above the other content, add the following.</p>
|
||||
<pre><code><nav>
|
||||
<a href="index.html">Home</a>
|
||||
<a href="about.html">About</a>
|
||||
</nav></pre></code>
|
||||
|
||||
<p>The key part of the snippet is the <strong>anchor/a</strong> tag, as this tells the browser to create the link to the files in the hrefs.</p>
|
||||
|
||||
<h3>Style the navigation</h3>
|
||||
<p>In the style tag, add the following (I recommend at the bottom of what's already there). Then give the page a reload.</p>
|
||||
<pre><code>nav{
|
||||
background-color: white;
|
||||
border-bottom: 1px solid gainsboro;
|
||||
padding: 12px;
|
||||
}
|
||||
nav a{
|
||||
padding: 12px;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
}
|
||||
nav a:hover{
|
||||
background-color: black;
|
||||
color: white;
|
||||
}</code></pre>
|
||||
|
||||
<p>Give each link a click to check everything's alright. Doing this you may spot the nav styling is only on one page, oops, simple mistake. To fix this you'll have to open up the other HTML file, and add the styling in there too.</p>
|
||||
|
||||
<h2>Make the styling global</h2>
|
||||
<p>With multiple pages up, imagine for a second if you had 10-15 more pages. How much of a pain would changing some styling be? Even just a simple colour change would be mega annoying, and time consuming. <em>Open file, change style, save, and repeat...</em></p>
|
||||
|
||||
<p>Thankfully there's a simple solution to this problem, and it's actually best-practice to do this for every website!</p>
|
||||
|
||||
<h3>External CSS</h3>
|
||||
<p>Our current internal stylesheet is now a hindrence as we've got multiple pages. So what we're going to do is take its content, and pop it into its own file.</p>
|
||||
|
||||
<h3>How</h3>
|
||||
<p>First off, create a new file (same place as the .html files) called <strong>main.css</strong>, this will be our external stylesheet.</p>
|
||||
<p>Next, open up one of the .html pages, and copy everything between the style tags, paste it into the CSS file, and save each file.</p>
|
||||
|
||||
<p>Now we've got the styling, we can get rid of the internal CSS entirely. Delete the style tags, and everything between from the .html pages, and replace them with the following snippet.</p>
|
||||
<pre><code><link rel="stylesheet" type="text/css" href="main.css"></code></pre>
|
||||
<p>Reload, and voila! The site looks exactly the same. It's just easier to manage now.</p>
|
||||
|
||||
<h2>Footer</h2>
|
||||
|
||||
<p>To finish things off, why not add a quick footer proclaiming our copyright of the site?</p>
|
||||
|
||||
<p>Add the following snippet just before the closing <code></body></code> tag.</p>
|
||||
|
||||
<pre><code><footer>
|
||||
<p>© Aney 2022 | Made with ♥</p>
|
||||
</footer></code></pre>
|
||||
|
||||
<p>And a little styling to the CSS file.</p>
|
||||
<pre><code>body{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
main{
|
||||
flex: 1 0 auto;
|
||||
}
|
||||
footer{
|
||||
background-color: black;
|
||||
color: white;
|
||||
}</code></pre>
|
||||
|
||||
<p>You may notice that body has already been used in the CSS, and that's OK thanks to the cascading nature of CSS. This can become a problem if you have the same selectors scattered around though, as it can begin to override styling. To avoid this problem I recommend having just the one location for each selector. So take the new <strong>body</strong> styling, and add it to the pre-existing body styling near the top of your CSS file.</p>
|
||||
|
||||
<h2>We got a website</h2>
|
||||
<p>A little bit of content here, and there. A couple of styling tweaks, and a few more pages then you've got your very first website.</p>
|
||||
|
||||
<p>From here there are a few different directions. You could:</p>
|
||||
<ol>
|
||||
<li>Follow along to the rest of my <a href="/guides/web-dev-101">web-dev 101</a></li>
|
||||
<li>Venture to the internet and learn everything you can about web development</li>
|
||||
<li><a href="/guides/guide-to-server-hosting.html">Setup a server</a>, pop what you've got on the worldwide web, and call it a day</li>
|
||||
</ol>
|
||||
|
||||
<p>Whatever you choose to do, I offer you the best of luck.</p>
|
||||
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<hr/>
|
||||
<p>Written by <a href="https://aney.co.uk" target="_blank" rel="noopener">@aney</a> with <a href="https://danluu.com/web-bloat/" target="_blank" rel="noopener">web bloat</a> in mind | <a href="https://github.com/Aney/website" target="_blank" rel="noopener">Source Code</a></p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Loading…
Reference in New Issue