So, I just started learning html from w3school. And I have started my little project which I am going to create simple website. And now I am stuck with creating drop down menu from my navigation bar. I can't seem to put it in the navigation bar. ps.I have edited some code I don't think it's relevant.
.topnav {
overflow: hidden;
padding-top: 6px;
padding-bottom: 6px;
margin: 0px;
}
.topnav h1 {
text-align: center;
font-size: 22px;
color: #FFFFFF;
margin: 0px;
}
.dropbtn {
background-color: #3498DB;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
float: left;
}
.show {
display:block;
}
</style>
</head>
<body>
<div class="topnav">
<h1>Home</h1>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Menu</button>
<div id="myDropdown" class="dropdown-content">
Content
</div>
</div>
</div>
Add below css and jQuery
css::
#myDropdown{
display: none;
}
jQuery::
$('.dropbtn').click(function(){
$(this).next('#myDropdown').stop(true,false).slideToggle();
})
You have to use script for hide/show your dropdown menu, Here you can see script
http://jsfiddle.net/renukaSingh/njhwr4z2/
Related
I am adding a responsive navigation bar to a website, closely based on a w3 school tutorial (https://www.w3schools.com/howto/howto_js_topnav_responsive.asp).
All is working fine, except that I am trying to center the menu links on the page (for the desktop version), instead of having it on the left side like the tutorial explains.
I tried modifying the value of each property, including float, but without success so far. It must be extremely simple, but what am I missing?
html:
<div class="nav" id="nav">
Home
About
Menu
Drinks
Values
Gallery
Booking
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
css:
.nav {
background-color: gold;
overflow: hidden;
}
.nav a {
float: left;
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.nav a:hover {
background-color: pink;
color: green;
}
.nav .icon {
display: none;
}
I saw that this question has already been asked with bootstrap, but as a beginner, I am only using plain css here.
you can use flex with center layout, give it a try
.topnav {
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
background-color: #333;
}
Another approach if you wanted to avoid using flexbox for whatever reason would be to set the menu items to display: inline-block instead of using floating. Then a simple text-align: center on the nav wrapper will be sufficient.
On a side note, it would make more sense semantically to use the <nav> element as a wrapper and put the menu items in a <ul> list as <li> elements.
.nav {
background-color: gold;
overflow: hidden;
text-align: center;
}
.nav a {
display: inline-block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.nav a:hover {
background-color: pink;
color: green;
}
.nav .icon {
display: none;
}
<div class="nav" id="nav">
Home
About
Menu
Drinks
Values
Gallery
Booking
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
What should I do to align the first 3 buttons in the center of the bar?
#navbar{
list-style-type: none;
position: relative;
top: -4px;
padding: 0;
margin: 0;
overflow: hidden;
background-color: #212121;
}
In your navigation bar you can put these three in one separate div and then align it to center
Hello friends to center a that your
menu options (nav) you only need
to use the text-aling rule: center;
,why ? Because the menu list are
formed by '' li '' or '' ul '' and we
only apply this rule to list and
ready :), greetings from mexico;)
<html>
<head>
<style>
body{
margin: 0px;
}
.navbar{
height: 60px;
background-color: #bbb;
line-height: 60px; //this will center inline elements in your navbar
}
.container{
margin-left: 5%;
margin-right: 5%;
}
.btn{
background-color: white;
padding: 10px 20px;
width: 100px;
border: none;
border-radius: 2px;
display: inline;
}
.nav{
display: inline;
list-style-type: none;
}
.nav li{
display: inline;
}
</style>
</head>
<body>
<!--Navbar-->
<nav class="navbar">
<div class="container">
<ul class="nav">
<li><button class="btn">Button1</button></li>
<li><button class="btn">Button2</button></li>
<li><a class="btn"><a> Button</a></li>
</ul>
</div>
</nav>
</body>
The above code should work for you. I have shown buttons using anchor tag and also button tag
I have followed a tutorial to build my own drop down menu. Im having problem to style my submenus. Can't find the right class to change it. want the sub menus to come under in one line and in a box.
Can anyone help me?
This is how I do my dropdowns, a bit modified to look more like yours, and you may need to modify it to suite your needs. You can take this code, place it in a text file, and open it with a browser. It should work fine. Also, personally, I don't like using tables or lists for menus but this is just personal preference. Here you go - pure HTML and CSS:
<style>
body { margin: auto; }
.menu
{
position: relative;
background: gray;
height: 40px;
}
.menuItem, .dropdownItem
{
position: relative;
float: left;
width: 150px;
color: black;
}
.menuItem:hover, .dropdownItem:hover
{
background: black;
color: white;
}
.menuItem
{
height: 40px;
line-height: 40px;
text-align: center;
cursor: pointer;
}
.dropdownItem
{
height: 100%;
line-height: 40px;
}
.dropdown
{
position: absolute;
top: -1000px;
width: 450px;
background: gray;
height: 40px;
}
.menuItem:hover .dropdown { top: 100%; }
</style>
<div class="menu">
<div class="menuItem">
Build New
<div class="dropdown">
<div class="dropdownItem">
Bath
</div>
<div class="dropdownItem">
Bathroom Lightning
</div>
<div class="dropdownItem">
Bathroom Faucet
</div>
</div>
</div>
<div class="menuItem">
Construction Of
</div>
<div class="menuItem">
Renovating
</div>
</div>
I hope that this helps.
I am trying to position some html elements (particularly h1 and p) under a position: fixed div without having to use the <br> element, because if the top div gets resized (in height), then it will overlap the <h1> and <p> element. Since this type of question usually needs code, here it is:
index.html file:
<!DOCTYPE html>
<html>
<head>
<title>Home | lobuo</title>
<link type="text/css" rel="stylesheet" href="stylesheet-main.css">
</head>
<body>
<div id="menuBack">
<ul id="menuBar">
<li class="menuItem">Home</li>
<li class="menuItem" class="subMenuHolder">
<a>Projects ▾</a>
<ul class="subMenu">
<li>Minecraft projects</li>
<li>Minecraft mods/plugins</li>
<li>Web apps</li>
</ul>
</li>
</ul>
<a href="https://github.com/lobuo">
<img class="socialIcon" src="img/Octocat.png" />
</a>
<a href="https://www.youtube.com/LobuoDev">
<img class="socialIcon" src="img/YouTube-icon-full_color.png" />
</a>
</div>
<br><br><br><br>
<div>
<h1>Welcome to my website!</h1>
<p>This is my website. I know how to code a little HTML and JavaScript. I do not have many projects here yet, but there will be some soon. The website is currently under construction, so don't be too dissapointed if a link doesnt work, or a page doesnt exist.</p>
<p>If you find something wrong with the website, you can report it as a bug <a>here.</a></p>
</div>
</body>
</html>
and here is the stylesheet-main.css file:
body {
margin: 0px;
}
#menuBack {
height: auto;
width: 100%;
background-color: rgba(9, 52, 100, 0.92);
position: fixed;
}
.menuItem {
color: #e5822e;
display: inline-block;
font-size: 25px;
font-family: verdana, sans-serif;
padding-left: 15px;
padding-right: 15px;
}
.menuItem:hover {
color: #ab6122;
background-color: rgba(48, 95, 147, 0.92);
}
.socialIcon {
height: 30px;
display: inline-block;
vertical-align: middle;
float: right;
padding: 20px;
}
a {
text-decoration: none;
color: #f44d4d;
}
h1 {
font-family: sans-serif;
text-align: center;
}
p {
font-family: "andale mono", "courier new", courier, serif;
padding: 10px;
}
/* MenuBar dropdown menu came from here: http://www.onextrapixel.com/2011/06/03/how-to-create-a-horizontal-dropdown-menu-with-html-css-and-jquery/ */
#menuBar {
float: left;
}
#menuBar > li {
float: left;
}
#menuBar li a {
display: block;
height: 2em;
line-height: 2em;
padding: 0 1.5em;
text-decoration: none;
}
#menuBar ul {
position: absolute;
list-style: none;
left: 7.1em;
display: none;
}
#menuBar ul li a {
width: auto;
background-color: rgba(9, 52, 100, 0.92);
}
#menuBar ul li a:hover {
background-color: rgba(48, 95, 147, 0.92);
}
#menuBar li:hover ul {
display: block;
}
Thanks in advance :D
Set the margin-top of the div that you need to be pushed down.
So wrap everything that needs to be pushed down in a div with a class name. Like:
<div class="container">
//everything that needs to be pushed down goes here
</div>
Then in your css you can push that whole container down by setting it's margin-top
.container {
margin-top: 100px;
}
Try setting position to sticky instead of fixed and give it a top: 0px;
All,
I have been scratching my head for well over two hours now and I just cannot see whats wrong with the code.
I am building a liquid layout with two navigation bars at the top. The first one is sitting well but the second one (id="filem_right") refuses to sit alongside it.
Here is the HTML:
<body id="container">
<div id="main_bar">
<ul>
<li class="maintabs">Overview</li><li class="maintabs">Collar/ Neckline</li><li class="maintabs">Sleeves
<ul>
<li class="s_leftright">Left Sleeves</li>
<li class="s_leftright">Right Sleeves</li>
</ul></li><li class="maintabs">Body</li>
</ul>
</div>
<div id="filem_right">
<ul>
<li class="filetabs">File</li><li class="filetabs">Edit</li><li class="filetabs">Settings</li>
</ul>
</div>
And here is the CSS:
#container {
min-width: 960px;
max-width: 1034px;
min-height: 500px;
background: rgba(245,212,13,1);
}
/* START OF MAIN MENU */
#main_bar ul {
width: 60%;
position: relative;
left: 3.2%;
border: 1px solid black;
background: rgba(153, 244,200,0.3);
}
.maintabs {
display: inline-block;
width: 25%;
line-height: 3.5em;
list-style-type: none;
}
.maintabs a {
display: block;
text-decoration: none;
color: rgb(165,165,165);
color: rgba(165,165,165,1);
text-align: center;
font-size: 0.8em;
font-weight: bold;
text-transform: uppercase;
}
.s_leftright {
list-style-type: none;
}
.maintabs ul {
display: none;
}
.maintabs:hover > ul {
display: inline-block;
position: absolute;
}
*/ END OF MAIN MENU */
/* START OF FILE MENU */
#filem_right {
display: inline-block;
position: relative;
width: 30%;
left: 69%;
top: 14%;
right: 3.2%;
}
.filetabs {
display: inline-block;
width: 33.3%;
overflow: hidden;
list-style-type: none;
line-height: 3.5em;
}
I had a look at Firebug and it appears that none of my code for 'filem_right' is rendered by the browser (FF 3.6).
Thank you,
Your comment here is incorrect,
*/ END OF MAIN MENU */
Should be /* at the start. This could be a reason the filem_right CSS isn't being picked up by the browser.