So I have the code below.
<nav>
<div class="clicker" tabindex="1">menu</div>
<div class="hiddendiv"> Register
Login</div>
</nav>
with the following css
nav{ margin-top: -70px;
} .clicker { font-size: 4em; outline:none; cursor:pointer; float:right; border-padding:4px; border-right: 5px solid #ed2024; }
.hiddendiv{ display:none; width:300px; font-size: 2em; background-color:#ed2024; float:left; padding:5px; }
.clicker:focus + .hiddendiv{ display:block; }
.clicker:focus{ display:block; float:left;
}
.hiddendiv a{ float: left;
margin-left: 10px;
}
I understand that focus doesn't let me click the link within the .hiddendiv element, but target doesn't seem to work either. I'd like to build this with css only. any tips?
If you want to show/hide content via CSS, I would use a checkbox label to toggle state.
.clicker {
font-size: 4em;
cursor: pointer;
}
.hiddendiv, #checkbox {
display: none;
}
input:checked + .hiddendiv {
display: block;
}
<nav>
<label class="clicker" tabindex="1" for="checkbox">clicker</label>
<input id="checkbox" type="checkbox">
<div class="hiddendiv"> Register
Login</div>
</nav>
But if you want to trigger it on :target you would do it like this
.clicker {
font-size: 4em;
cursor: pointer;
}
.hiddendiv {
display: none;
}
.hiddendiv:target {
display: block;
}
<nav>
<div class="clicker" tabindex="1">menu</div>
<div class="hiddendiv" id="hiddendiv"> Register
Login</div>
</nav>
Related
I tried to get a hamburger menu working with only css.
The problem is that my checked function doesn't work as intended and I cant figure out what I got wrong.
The hamburger menu starts at 1000px.
I used input with checkbox to switch between open and close.
#toggle:checked + .menu { display: block;}
.menu a {
font-size: 22px;
}
#toggle {
display: none;
}
.menu {
text-align: center;
width: 100%;
display: none;
}
#toggle {
display: block;
}
#toggle:checked+.menu {
display: block;
}
<a herf="#">
<input type="checkbox" id="toggle">
<div class="menu">
Home
Resources
Monthly
Terms
Privacy
</div>
</a>
You've wrapped these some of these elements in malformed links (herf?)....and that's not permitted by HTML
See this Q&A
The browser seems to be autoclosing the link wrapper just after the input which means that the :checked + selector fails.
Remove the link or change it to something innocuous, like a div.
nav .menu a {
text-decoration: none;
color: white;
font-weight: 700;
padding: 0 1% 0 1%;
}
.menu a {
font-size: 22px;
}
#toggle {
display: none;
}
.menu {
text-align: center;
width: 100%;
display: none;
}
nav .menu a {
display: block;
color: #2b9dff;
background-color: white;
border-bottom: 1px solid #2b9dff;
margin: 0;
}
#toggle {
display: block;
}
#toggle:checked+.menu {
display: block;
}
<input type="checkbox" id="toggle">
<div class="menu">
Home
Resources
Monthly
Terms
Privacy
</div>
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/
How do you separate the menu bar from the body in a div, to place everything after contact below it, is there a corresponding code like a newline? I would really appreciate the help :) Thanks in advance
here's a link of picture shot:
CSS
/* because of the * default code it takes out all margin and padding */
* {
margin: 0px;
padding: 0px;
}
#container {
display: table;
}
#row {
display: table-row;
}
#left, #right, #middle {
display: table-cell;
}
#row {
display: table-row;
}
#left, #right, #middle {
display: table-cell;
}
body {
font-family: verdana;
font-size: 10px;
background-color: ABC;
padding: 50px;
margin: auto;
}
h1 {
text-align: center;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
float: left;
position: relative;
}
li + li {
border-left: 1px solid #ccc;
}
a {
display: block;
padding: 7px 10px;
color: #222; /*changes the color of all item font color in menu bar */
background: #eee; /*changes the background color of Menu bar */
text-decoration: none;
}
a:hover {
color: #fff;
background: #666; /* changes hover bg color of any menu item being pointed*/
}
a:active {
color: #f2f75e;
background: #0090cf;
}
/* Child Menu Styles */
.level-two {
position: absolute;
top: 100%;
left: -9999px;
width: 100px;
}
li:hover .level-two {
left: 0;
}
.level-two li {
width: 100%;
border: 0;
border-top: 1px solid #ccc;
}
HTML
<h1>
<ul class="level-one">
<li> Home </li>
<li> Drops
<ul class="level-two">
<li> One </li>
<li> Two </li>
<li> Three </li>
</ul>
</li>
<li> Contact </li>
</ul>
</div>
<div id="container">
<div id="row">
<div id="left">
<h4>Left Col</h4>
<p>...</p>
</div>
<div id="middle">
<h4>Middle Col</h4>
<p>...</p>
</div>
<div id="right">
<h4>Right Col</h4>
<p>...</p>
</div>
</div>
</div>
</h1>
add clearfix class on both of .
DEMO
.clearfix{
clear:both;
}
DEMO1
One alternative to the clear property is to trigger a new block formatting context on the menu in order to contain the floats inside .level-one :
.level-one {
/* trigger block formatting context to contain floats. */
overflow: hidden;
}
Demo at http://jsfiddle.net/mrYdV/1/
Here is a list of other property/value pairs that trigger block formatting context
W3C specification
Bulletproof backwards-compatible version
There is a great answer with more details covering this method at How does the CSS Block Formatting Context work?
The clear property will do this for you. You can add it to your #container for example:
#container {
display: table;
clear:both;
}
Clear means something like:
clear all elements on both sides of this element
I am trying to create a mega menu like those at http://rackspace.com. I have tried the tutorials given at some of the other questions about this already asked, but one of them used a lot of images, and one of them didn't work with the version of jQuery they linked to. I would like to keep this all CSS, but if I must I could use some JavaScript.
I don't understand how to make complex mega menu's but only the simple drop-down's. If someone could provide me with the code for this I would be very happy. I am learning CSS now and I think this will allow me to sharpen my knowledge as well.
Thanks,
Scott
Here is a very nice looking solution a quick Google search turned up. Haven't tried it myself but looks promising: http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-a-kick-butt-css3-mega-drop-down-menu/
Your question is too general. What you're trying to achieve is not going to happen with a simple HTML and CSS code that we can write here.
So you may be interested in this this jQuery plugin and CSS framework:
https://myflashlabs.github.io/24component-bars/
It helps you to create responsive mega menu, header, sidebar, and footer with lots functionalities fast and easy, without any hassle... It's exactly what you want :)
You don't need to code it yourself all from the beginning when there's already a solution out there!
Extremely quick sample of what you need to do:
http://jsfiddle.net/KqZd4/
I know this looks nothing like those, but that really is all the functionality you need. Just expand what is in the dropdown
<li class="main_list">Electronics
<ul>
<p class="category_header">Buy Any Electronics Item And Get Flat 50% OFF</p>
<ol>
<li>Mobiles</li>
<li>Item1</li>
<li>Item2</li>
</ol>
<ol>
<li>Tablets</li>
<li>Item1</li>
<li>Item2</li>
</ol>
</ul>
</li>
add more you want
then simple style
#main_menu
{
background-color:#1C1C1C;
float:left;
padding:0px;
width:700px;
height:50px;
line-height:50px;
margin-left:140px;
border-radius:5px;
}
#main_menu .main_list
{
color:white;
list-style-type:none;
float:left;
border-left:1px solid #666;
padding-left:27px;
padding-right:27px;
}
#main_menu .main_list:hover
{
color:#2E9AFE;
}
.main_list ul
{
background-color:white;
width:600px;
position:absolute;
left:150px;
width:700px;
padding:0px;
float:left;
padding-bottom:10px;
}
.main_list ul p
{
color:white;
background-color:#2E9AFE;
margin:0px;
text-align:left;
padding-left:10px;
font-size:20px;
font-weight:bold;
}
.main_list ul ol
{
float:left;
padding:0px;
list-style-type:none;
margin-left:30px;
}
.main_list ul ol li
{
line-height:25px;
font-weight:bold;
font-size:16px;
color:#2E9AFE;
}
if you have any problem understanding here is a complete tutorial
http://talkerscode.com/webtricks/mega-dropdown-menu-like-ecommerce-using-css.php
Try This
#import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css');
* {
box-sizing: border-box;
font-family: sans-serif;
}
body {
margin: 0;
}
/* Style Navigation bar */
.navbar {
display: -webkit-flex;
display: flex;
background-color: #e3e3e3;
}
.navbar a {
display: block;
text-decoration: none;
color: black;
padding: 1.1em 1em;
font-size: 1.1em;
border-bottom: 3px solid transparent;
transition: 0.1s;
}
.navbar > a:hover, .dropdown > a:hover {
border-bottom-color: #FA7D19;
}
/* Style Mega Menu */
.dropdown-content {
display: none;
position: absolute;
width: 90%;
left: 5%;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
overflow: hidden;
}
.dropdown-content .header {
padding: 16px;
color: #777;
background: white;
}
.dropdown:hover .dropdown-content {
display: block;
}
/* Create three equal columns that stacks next to each other */
.row {
display: -webkit-flex;
display: flex;
}
.column {
width: 100%;
padding: 10px;
background: #f8f8f8;
}
.column a {
color: black;
padding: 16px;
text-decoration: none;
display: block;
text-align: left;
}
.column a:hover {
background-color: #ddd;
}
/* Makes the three columns stack on top of each other instead of
next to each other (when screen width is 600px or less) */
#media screen and (max-width: 600px) {
.row {
flex-direction: column;
}
}
<div class="navbar">
Home
<div class="dropdown">
Dropdown <i class="fa fa-caret-down"></i>
<div class="dropdown-content">
<div class="header">
<h2>Mega Menu</h2>
</div>
<div class="row">
<div class="column">
<h3>Category 1</h3>
Link 1
Link 2
Link 3
</div>
<div class="column">
<h3>Category 2</h3>
Link 1
Link 2
Link 3
</div>
<div class="column">
<h3>Category 3</h3>
Link 1
Link 2
Link 3
</div>
</div>
</div>
</div>
Pricing
</div>
<div style="padding:10px 15px;">
<h1>Create a Mega Menu</h1>
<p>Hover over the "Dropdown" link to see the mega menu.</p>
</div>
Reference:How To Create a Mega Menu
Height of a div
I'm trying to set the size of a div according to its content.
See the complete code here.
Basically my problem is in the div: content
In the HTML code look for the comment: wrongly
There had to add a tag p, I'm giving it a clear that the div align to the end.
Without this clear, the div will cut the image.
Actually I wonder just a better way to do this task.
There seemed a good a place p with nothing in it only with a clear class so that this problem does not happen.
What do you recommend me? There is a better way to do this task?
The goal is not to let the rope div content:
Html
<div id="header">
<div class="headerLeft" />
</div>
<div id="waycontact">
<div class="contactPaula">
<p>paulaMACHADO</p>
<p>crea 11111/D-MG</p>
<p>(00) 0000 0000</p>
</div>
<div class="contactBeatriz">
<p>beatrizDAMAS</p>
<p>crea 22222/D-MG</p>
<p>(00) 0000 0000</p>
</div>
<div class="address">
<p>av. xxxxxxxl, yyy, sl. zzz, centro - belo horizonte - mg</p>
<p>cep: 00000-000 - telefax: (00) 0000 0000</p>
<p>xxxxx#yyyy.com.br</p>
</div>
</div>
<div id="content">
<img class="left" alt="Arquitetura" src="http://cdn.archdaily.net/wp-content/uploads/2009/05/1265154380_107-silos-090511-west-view-a4-allard-architecture-528x304.jpg" />
<h2>Sobre a empresa</h2>
<p>A AMSD é focada em qualidade..</p>
<p class="clear" /> <!--Wrongly!! -->
</div>
<div id="footer">
<a class="current" href="#">home</a>
|
quem somos
|
blog
|
na mídia
|
fale conosco
</div>
CSS
body
{
font-size: 0.87em;
font-family: Calibri, Arial, Georgia, Verdana, Tahoma, Microsoft Sans Serif;
margin: 0;
padding: 0;
color: #666666;
}
a:link
{
color: rgb(124,71,111);
text-decoration: underline;
}
a:visited
{
color: rgb(41, 12, 36);
}
a:hover
{
color: rgb(91,25,79);
text-decoration: none;
}
a:active
{
color: #AB6D9C;
}
p
{
margin:2px;
}
ul
{
list-style-type: square;
}
li
{
line-height: 165%;
}
div#header
{
width:1024px;
margin:5px auto;
height:150px;
background-color: rgb(91,25,79);
}
div.headerLeft
{
height:100%;
width:900px;
border-right:10px solid rgb(169, 171, 174);
background-color: rgb(124,71,111);
}
div#footer
{
margin-top:10px;
text-align:center;
position:relative;
font-size: 1.27em;
}
div#content
{
margin:auto 40px;
width:200;
border:2px solid red;
}
/* Others
-----------------------------------------------------------*/
div.contactPaula p, div.contactBeatriz p
{
padding:0px;
margin:0px;
}
div.contact, div.contactPaula, div.contactBeatriz
{
margin-bottom:15px;
margin-top:0px;
}
div.contactBeatriz
{
float:right;
text-align:right;
}
div.contactPaula
{
float:left;
text-align:left;
}
div.address
{
text-align:center;
margin-bottom:30px;
}
div#waycontact
{
width:340px;
margin:20px 40px;
}
.clear, div.address, div#footer, div#waycontact
{
clear:both;
}
.left
{
float:left;
}
a.current
{
font-weight:bold;
}
Add a "overflow:hidden;" to the div#content so it will look like the following. You won't need a separate clear property and a p tag. Good luck :)
div#content
{
margin:auto 40px;
width:200;
border:2px solid red;
overflow:hidden;
}
To make a container expand to fill floated elements, give it an overflow property:
div.wrapper {
overflow: auto;
}
A better method than using an empty <div class="clear"> is to use the 'cearfix' method.
This is an example borrowed straight from HTML5Bolierplate
, just apply it to the div that is giving you trouble.
In your case #content will become #content.clearfix
/* The Magnificent Clearfix: Updated to prevent margin-collapsing on child elements.
j.mp/bestclearfix */
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }
/* Fix clearfix: blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin-padding-bottom-of-page */
.clearfix { zoom: 1;