I downloaded foundation 6 "essential". Here: http://foundation.zurb.com/sites/download.html/
This download has an index.html file that is an entry into the example page.
I decided I wanted to integrate this module called "f6-top-bar" into the top of the example foundation index.html page:
http://zurb.com/building-blocks/f6-top-bar
To do this I did the following:
I copied the HTML code of "f6-top-bar" here:
http://zurb.com/building-blocks/f6-top-bar
into the index.html file of the foundation 6 download index.html page.
I then copied the CSS of "f6-top-bar" here:
http://zurb.com/building-blocks/f6-top-bar
into the app.css file of the foundation 6 index.html page
The end result was not a responsive menu with a hamburger style icon. It was simply a static unordered list.
What am I doing wrong ?
HTML
<!doctype html>
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Foundation for Sites</title>
<link rel="stylesheet" href="css/foundation.css">
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<div class="title-bar" data-responsive-toggle="main-menu" data-hide-for="medium">
<button class="menu-icon" type="button" data-toggle></button>
<div class="title-bar-title">Menu</div>
</div>
<div class="top-bar" id="main-menu">
<div class="top-bar-left">
<ul class="dropdown menu" data-dropdown-menu>
<li class="menu-text">Site Title</li>
</ul>
</div>
<div class="top-bar-right">
<ul class="menu" data-responsive-menu="drilldown medium-dropdown">
<li class="has-submenu">
One
<ul class="submenu menu vertical" data-submenu>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</li>
<li>Two</li>
<li>Three</li>
</ul>
</div>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/vendor/what-input.js"></script>
<script src="js/vendor/foundation.js"></script>
<script src="js/app.js"></script>
</body>
</html>
css/app.css
body {
margin-top: 2rem;
}
.title-bar {
background: #333;
padding: 0.9rem;
}
.top-bar {
background: #333;
}
.top-bar ul {
background: #333;
}
.top-bar ul li {
background: #333;
}
.top-bar ul li a {
color: #fff;
}
.menu-text {
color: #fff;
}
#media only screen and (max-width:40em) {
.menu-text {
display: none !important;
}
}
#media only screen and (min-width:40em) {
.menu:last-child {
border-left: 1px solid #4e4e4e;
}
.menu:first-child {
border-left: none;
}
.menu li:not(:last-child) {
border-right: 1px solid #4e4e4e;
}
}
.dropdown.menu .submenu {
border: none;
}
.dropdown.menu .is-dropdown-submenu-parent.is-right-arrow > a::after {
border-color: #fff transparent transparent;
}
.is-drilldown-submenu-parent > a::after {
border-color: transparent transparent transparent #fff;
}
.js-drilldown-back::before {
border-color: transparent #fff transparent transparent;
}
End result :(
The answer is that this requires foundation "complete". Foundation "essential" will not work.
Related
I know that there are other questions on StackOverflow about this but those solutions haven't worked out for me. I'm trying to create a responsive navbar with a cool icon. Midway, I tried to use a font awesome bar. I tried using the "Fas fa-bar" but it didn't work. Here's my code:
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
<title>Document</title>
</head>
<body>
<nav>
<input type="checkbox" id="check">
<label for="check" class="check-btn">
<i class="fas fa-bars"></i>
</label>
<label class="logo">Aeotic</label>
<ul>
<li> <a class="active" href="#">Home</a> </li>
<li> About </li>
<li> Contact </li>
<li> Services </li>
<li> Feedback </li>
</ul>
</nav>
<style>
* {
padding: 0;
margin: 0;
text-decoration: none;
list-style: none;
box-sizing: border-box;
}
body {
font-family: 'Nunito', sans-serif;
}
nav {
background: #0082e6;
height: 80px;
width: 100%;
}
label.logo {
color: white;
font-size: 35px;
line-height: 80px;
padding-left: 100px;
font-weight: bold;
}
nav ul {
float: right;
margin-right: 20px;
}
nav ul li {
display: inline-block;
line-height: 80px;
margin: 0 5px;
}
nav ul li a {
color: white;
text-transform: uppercase;
padding: 7px 13px;
border-radius: 3px;
}
a.active, a:hover {
background: #1b9bff;
transition: 0.5s;
}
</style>
</body>
</html>
Try running the code, the bar doesn't work properly.
Add "fa" before any kind of icon class you want to use from font-awesome, it works for me.
<i class="fa fas fa-bars"></i>
you use font awesome latest version v5.10.0
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
So I have been searching to find a way to change the color of the bottom border of my navigation bar links with a linear animation starting from the bottom going upwards. I was able to find a thread with some code that I semi-understand, just a few CSS lines which has sent me in the right direction, however the colour change is animated from the top down, whereas I would like the opposite.
I am using Bootstrap if that makes any different, is there any way I can do the opposite and have the transition start from the bottom and go upwards? My code is posted below...
* {
box-sizing: border-box;
}
body {}
#header-nav {
background-color: #262626;
font-family: 'Kanit', sans-serif;
font-size: 1.1em;
text-transform: uppercase;
border-bottom: #212121 thick solid;
}
#header-nav .container {
padding-top: 10px;
padding-bottom: 10px;
/* border-bottom: purple thick solid;*/
margin: 0px;
}
/*212121*/
#header-nav a {
color: #FFF;
margin-right: 2rem;
padding: 10px;
/* border-bottom: purple thick solid; */
transition-property: all;
transition-duration: 0.5s;
transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}
#header-nav a:hover {
text-decoration: none;
/* background-color: purple;*/
border-bottom: white thick solid;
}
<!DOCTYPE html>
<html>
<head>
<!-- Meta & Other -->
<title>Infamous | Home</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Infamous official website">
<meta name="keywords" content ="Infamous, Minecraft, Server, Game, Gaming">
<meta name="author" content="MrWardy">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="./Stylesheets/default.css">
<!-- Fonts -->
<script src="https://kit.fontawesome.com/35fad75205.js" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css2?family=Kanit&display=swap" rel="stylesheet">
</head>
<body>
<header>
<nav id="header-nav" class="navbar-nav ml-auto">
<div class="container">
<a class="active" href="#"><i class="fas fa-home"></i> Home</a>
<i class="fas fa-question"></i> About
<i class="fas fa-book"></i> Rules
<i class="fas fa-vote-yea"></i> Vote
<i class="fas fa-tags"></i> Store
</div>
</nav>
</header>
<!-- JavsScript -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>
</html>
Use gradient for this:
.box {
background:#000;
padding:10px 20px;
}
a {
display:inline-block;
color:#fff;
font-size:30px;
text-decoration:none;
padding-bottom:10px; /* control the space for the gradient */
background:
linear-gradient(currentColor,currentColor)
bottom /* make it bottom */
/100% 0px /*start at heght = 0; */
no-repeat;
transition:0.3s all;
}
a:hover {
background-size:100% 6px; /* make the height 6px*/
}
<div class="box">
a link
</div>
Another syntax where you adjust the position instead:
.box {
background:#000;
padding:10px 20px;
}
a {
display:inline-block;
color:#fff;
font-size:30px;
text-decoration:none;
padding-bottom:10px;
background:
linear-gradient(currentColor,currentColor)
left 0 bottom -7px
/100% 6px
no-repeat;
transition:0.3s all;
}
a:hover {
background-position:left 0 bottom 0;
}
<div class="box">
a link
</div>
i tried to make a top nav bar. why my version is different from the w3s version, I cant find my mistake.
this is the css code and the html code
.logo {
padding-right: 30px;
color: #ffffff;
}
.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border: 1px solid #a80664;
border-color: transparent;
background-color: #a80664;
}
.topnav-menu {
float: left;
}
.topnav-menu a {
display: block;
color: #ffffff;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.topnav-menu a:hover:not(.active) {
background-color: #ff0094;
}
.topnav-menu a.active {
{
color: #a80664;
background-color: #f3f3f3;
}
}
<!DOCTYPE html>
<html>
<head>
<!-- BOOTSTRAP CSS STYLESHEET LINK -->
<!-- MY CUSTOM CSS -->
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<title></title>
</head>
<body bgcolor="#000000">
<li>
<div class="logo"><a>LOGO</a></div>
</li>
<ul class="topnav-menu">
<li><a class="active" href="#Home">HOME</a></li>
<li>KATEGORI</li>
</ul>
</body>
</html>
With those code I can't make a top nav bar like this
this is what i want
what kind of mistake did i do?
You have to put your logo before tag and you have to wrap in
and you have to wrap your all code in side
<nav>
<div class="logo">
<img src="imagepath">
</div>
<div class="wrapper">
<ul>
<li>Home</li>`enter code here`
**strong text**<li>About</li>
</ul>
</div>
</nav>
This is my code but the things which i wanna put inside the button are not coming inside it and it is coming outside the button. Any help would be highly apprecieated. This is the pic of what is happening
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
.dropbtn {
background-color: #d90000;
color: "white";
padding: 16px;
border; #ffffff
cursor: pointer;
}
.dropdown { position: relative;
display; inline-block;
}
.dropdown content { diplay: none;
position: absolute;
bacground-color:#f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0,0.2);
}
.dropdown-content a { color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #b30000}
.dropdown:hover .dropbtn {display: block;
}
.dropdown:hover .dropbtn { background-color:#3e8e41;
}
</head>
<body>
<div class="well well-sm">
<h2>Quick Travel</h2>
<div class="dropdown">
<button class="dropbtn">Tutorials </button>
<div class="dropdown-content">
begginer
Advance
Specials
</div>
</div>
</div>
</body>
</html>
Try this :
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Tutorials </button>
<ul class="dropdown-menu">
<li>begginer</li>
<li>Advance</li>
<li>Specials</li>
</ul>
</div>
my sample code below, works in all browsers apart from ie9, in ie9 the leftcolumn is actually nearer the middle of the page for some reason! (im sure if you copy paste you will be able to replicate)
anyone help me out as to why? the css seems fine to me?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>TEST</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
<style type="text/css">
body, html, form {
padding:0;
margin:0;
}
body {
font-family:"Segoe UI",Tahoma,Helvetica,Sans-Serif;
font-size:12px;
color:#333333;
}
#container {
min-width:1200px;
}
#horizontal-nav {
background: #1AA2DE;
width: 100%;
height:41px;
}
#left-column {
margin-top:10px;
width:210px;
float:left;
}
#center-column {
float:left;
width:180px;
margin-top:10px;
}
#right-column {
margin-top:10px;
float:left;
margin-left:10px;
}
/* TOP NAV */
.hmenu,
.hmenu ul {
list-style: none;
margin:0;
padding: 0 0 0 20px;
}
.hmenu {
font-size: 16px;
float: left;
}
.hmenu > li {
float: left;
}
.hmenu li a, .hmenu li span {
display: block;
padding: 10px 20px;
text-decoration: none;
color: #fff;
}
.hmenu > li:hover > a {
background: #5EBEE8;
}
</style>
</head>
<body>
<div id="container">
<div id="horizontal-nav">
<ul class="hmenu">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
<div id="left-column">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
</ul>
</div>
<div id="right-column">
Right Content
</div>
</div>
</body>
</html>
http://jsfiddle.net/isherwood/Wgtcy/
The positioning of the horizontal-nav div is throwing off your subsequent floats in the container div in IE9. Give your horizontal-nav div a float: left; to fix.
Unless you plan on creating a fixed header you should always have block-level elements playing by the same positioning rules. Since you are using float:left; for the other block elements then this will fix on ALL machines, regardless of weird configs people are running in random browsers.