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>
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"/>
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>
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.
the css dropdown is a variation of the one found at:
http://www.w3schools.com/css/tryit.asp?filename=trycss_dropdown_navbar
When placed inside a dijit.layout.ContentPane, instead of floating, a scroll bar appears.
I've tracked the bug to this file:
<link rel="stylesheet" href="http://js.arcgis.com/3.13/dijit/themes/claro/claro.css">
But i fail to see the cause.
Below, the code.
<!-- File: css/dropdown.css-->
ul.dbtul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li.dbtli {
float: left;
}
li.dbtli a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li.dbtli a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<link rel="stylesheet" href="http://js.arcgis.com/3.13/dijit/themes/claro/claro.css">
<style type="text/css">
html, body { height: 100%; }
</style>
<link rel="stylesheet" type="text/css" href="css/dropdown.css"/>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.11.2/dojo/dojo.js"></script>
<script>
var dojoConfig = {
parseOnLoad: true
}
require([
'dijit/layout/BorderContainer', 'dijit/layout/ContentPane', "dojo/parser", "dojo/domReady!" ],
function(BorderContainer, ContentPane, parser) {
parser.parse();
});
</script>
</head>
<body class="claro" style="font-family: Verdana; font-size: 11px;" >
<div id="mainWindow" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline',gutters:false" style="width:100%; height:100%;">
<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
<a id="linkDeRegreso" style="display:none;" href="#" class="controlesVolver"> << Volver a página anterior</a>
<div >
<ul class="dbtul">
<li class="dbtli"><a class="active" href="#home">Home</a></li>
<li class="dbtli">News</li>
<li class="dropdown">
123456
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
This is a result of the BorderContainer layout, which sets a fixed height for the ContentPane div. This div has the dijitContentPane class and claro.css has the following declarations for it:
.dijitContentPane {
display: block;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
You can override overflow to visible and your example will work but then you may run into layout problems when you add other elements to the container. I would suggest to just use a dijit MenuBar instead: https://dojotoolkit.org/reference-guide/1.10/dijit/MenuBar.html
I'm trying to make an off-canvas menu, but encountered a problem.
Only the two first menu links are showing with the grey-black background but I want all of the menu links to have it. The remaining 5 menu links are indeed inside the menu (as you can see when you hover on the links), but they are with a transparent background.
I put the html and css codes into a Jsfiddle: https://jsfiddle.net/ghbx6fmn
P.S. The codes seem to be working fine on Jsfiddle, but on my website it doesn't...
/*===== SLIDE MENU ======*/
/*---------- HIDE SELECT CHECKBOX ----------*/
.toggle,
.full-screen-close
{
display: none;
}
.full-screen-close
{
width: 100%;
height: 100%;
position: absolute;
cursor: pointer;
top:0;
left:0;
}
/*---------- TOGGLE OFF-CANVAS MENU ----------*/
.toggle:checked + .container > .menu-container
{
margin-left: 70%;
}
.toggle:checked + .container > .content .full-screen-close
{
display: block;
background: rgba(0,0,0,.5);
}
.menu
{
padding-top: 24px;
}
.toggle-btn,
.close-btn
{
cursor: pointer;
}
.toggle-btn
{
font-size: 2.25rem;
}
.close-btn
{
float: right;
font-size: 1.5rem;
padding: 1.5rem;
color: #ededed;
}
.menu-container,
.content
{
transition: margin 0.5s ease-in-out;
}
.menu-container
{
background: #2c3e50;
width: 40%;
margin-left: 100%;
float: right;
height: 100%;
position: absolute;
z-index:99;
}
.slide-menu i
{
margin-right: 1rem;
font-size: 1.5rem;
vertical-align: middle;
}
.slide-menu li a
{
color: #fff;
padding: 1.5rem;
font-size: 1.125rem;
text-transform: uppercase;
font-weight: 600;
display: block;
transition: background-color .5s ease-in-out;
}
.slide-menu li a:hover
{
background-color: #34495e;
}
/*===== MEDIA QUERIES ======*/
#media (max-width: 460px) {
.slide-menu li a
{
font-size: 0.875rem;
padding-left: 12px;
}
.slide-menu li i
{
font-size: 16px;
}
}
#media (max-width: 320px){
.slide-menu li i
{
display: none;
}
}
<html lang="en">
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="Off-canvas navigation menu Tutorial" />
<meta name="keywords" content="slide-menu, sidebar, off-canvas, menu, navigation" />
<meta name="author" content="AcasA Programming" />
<link rel="icon" href="../../favicon.ico" />
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/right-slide.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />
<body>
<input type="checkbox" id="offcanvas-menu" class="toggle" />
<div class="container">
<aside class="menu-container">
<div class="menu-heading clearfix">
<label for="offcanvas-menu" class="close-btn">
<i class="fa fa-times"></i>
</label>
</div><!--end menu-heading-->
<nav class="slide-menu">
<ul>
<li><i class="fa fa-home"></i>Testing 1</li>
<li><i class="fa fa-star"></i>Testing 2</li>
<li><i class="fa fa-folder-open"></i>Testing 3</li>
<li><i class="fa fa-cogs"></i>Testing 4</li>
<li><i class="fa fa-star"></i>Testing 5</li>
<li><i class="fa fa-folder-open"></i>Testing 6</li>
<li><i class="fa fa-cogs"></i>Testing 7</li>
</ul>
</nav><!--end slide-menu -->
</aside><!--end menu-container-->
<section class="content">
<label for="offcanvas-menu" class="full-screen-close"></label>
<div class="menu right">
<label for="offcanvas-menu" class="toggle-btn">
<i class="fa fa-bars"></i>
</label>
</div><!--end menu-->
<div class="menu-options clearfix">
<div class="right">
</div>
</div>
<div class="content-body">
</div><!--end content body-->
</section><!--end content-->
</div> <!--end container -->
</body>
</html>
Note: I'm not thrilled with the structure of your HTML/CSS and think it could use a refactor. My answer will address the issues you're having, but you should aim to simplify your code further.
Problem 1: Your menu won't increase the height of the gray background, because the menu is an absolutely positioned element, and hence outside of the document flow.
The easiest way to ensure the gray background fills the entire viewport is this:
.full-screen-close {
...
p̶o̶s̶i̶t̶i̶o̶n̶:̶ ̶a̶b̶s̶o̶l̶u̶t̶e̶;̶
position: fixed;
}
Problem 2: Now that we've fixed the first issue, we see the blue background behind the menu doesn't extend all the way.
No problem. Let's just remove the height property.
.menu-container {
...
h̶e̶i̶g̶h̶t̶:̶ ̶1̶0̶0̶%̶;̶
}
Now, .menu-container is as tall as it needs to be, not 100% of the parent's height.
Have a look: https://jsfiddle.net/ghbx6fmn/2/