Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Day 23 - Navigation Bar #30DaysofCSSGirls

Day 23 - Navigation Bar #30DaysofCSSGirls

Navigation Bar can be lead to your way of finding the information inside the website. It can be helping people to know more products' review such as fashion, IT and etc. It guides the reader to know places and food recommendation for travel which help local business to pick their business through the website.

A Pen by Jia Qian Koh on CodePen.

License.

<div class="container">
<button class="tablinks" onmouseover="openContent(event, 'menu')">Food</button>
<button class="tablinks" onmouseover="openContent(event, 'about')">About Me</button>
<button class="tablinks" onmouseover="openContent(event, 'contact')">Contact Me</button>
</div>
<div id="menu" class="tabcontent">
<h3>Food</h3>
<table style="width:50%">
<tr>
<td> <a href="https://www.burpple.com/f/fq6SoTex" target="_blank"><img src = https://burpple.imgix.net/foods/2e7e00f0302e1e46deca1744740_original.?w=645&dpr=1&fit=crop&q=80 width="200" height="250"/></td>
<td><a href="https://www.burpple.com/f/EHR6XX4d" target="_blank"><img src = https://burpple-3.imgix.net/foods/2e7e00ef10affb26d7381633030_original.?w=645&dpr=1&fit=crop&q=80 width="200" height="250"/></td>
<td><a href="https://www.burpple.com/f/ahOH8yRZ" target="_blank"><img src = https://burpple-2.imgix.net/foods/2e7e00f01608559245761732500_original.?w=645&dpr=1&fit=crop&q=80 width="200" height="250"/></td>
<td><a href="https://www.burpple.com/f/Jo-zG8XO" target="_blank"><img src = https://burpple-3.imgix.net/foods/2e7e00efc78bd6a6e1e41701019_original.?w=645&dpr=1&fit=crop&q=80 width="200" height="250"/></td>
</tr>
</table>
</div>
<div id="about" class="tabcontent">
<h3>About Me</h3>
<p>Proud to be a Foodie 🍴<br>
Search good food in everywhere 🍻<br>
Write about food reviews around 🇸🇬 <br>
Recommendation about food in different area<br>
Noticed by Burpple (TNC Gelato) & Donya (Salmon Mentai Don)<br>
Thank you for wonderful food !<br>
</p>
</div>
<div id="contact" class="tabcontent">
<h3>Contact Me</h3>
<p><a href="https://www.burpple.com/@swifty_star4" target="_blank">Jia Qian's Burpple</a></p>
ALL WE WANT IS SOMETHING MORE TO DREAM ABOUT AND TO ADORE <br>
</div>
<!--
https://www.w3schools.com/howto/howto_js_hover_tabs.asp
--!>
function openContent(evt, getInfo) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(getInfo).style.display = "block";
evt.currentTarget.className += " active";
}
@import url('https://fonts.googleapis.com/css?family=Quicksand');
.container {
border: 5px solid #FC7D7B;
background-color: #355C7D;
width: 96%;
height: 210px;
}
.container button {
background-color: inherit;
color: white;
padding: 22px;
width: 100%;
border: white;
outline: white;
text-align: center;
cursor: pointer;
font-family: 'Quicksand',serif;
font-size: 20px;
}
.container button:hover {
background-color: #FEC8C1;
}
.container button.active {
background-color: #FEC8C1;
}
.tabcontent {
padding: 5px 12px;
border: 7px solid #A8E6CF;
background-color: #E3F0FF;
width: 94%;
height: 390px;
display: none;
font-family: 'Quicksand',serif;
font-size: 25px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment