This is what it should look like:
There is a tab-menu and a dropdown area. This should always have the same position (but different content and the respective tab choosen) as in the picture. Meaning it should always be as wide as the tabs(-menu).
But I can not figure out how:
to get this responsive
how to have the dropdown area stay where it is
how to style the subitems (in the dropdown area)
Here is what I got so far (sorry for the huge css it is not cleaned yet!), the menu starts at line 1559.
http://jsfiddle.net/pxpHw/
How do I do this properly?
THANKS!
code:
// css
nav {
cursor: default;
}
a {
text-decoration: none;
color: #000000;
}
#menu ul {
margin: 0px;
padding: 0px;
left: 0;
list-style-type: none;
background:green;
z-index: 100;
max-width: 60em;
}
#menu li {
float: left;
width: 20%;
text-align: center;
}
#menu li ul {
display: none;
/*display: block;*/
padding-top: 3px;
}
#menu li:hover ul {
display: block;
}
#menu li ul li {
background-color: #2F2D49;
border-bottom: 1px solid #FFFFFF;
width: 100%;
max-width: 60em;
min-height: 30em;
position: absolute;
}
#menu li ul li a {
color: #FFFFFF;
}
#menu li ul li:hover {
background-color: #232323;
}
Use media queries to get the responsive design
Check the following links
http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/
http://mediaqueri.es/
Thanks
AB
This is what I was looking for: (Columns and Layout tab)
http://codecanyon.net/item/css3-full-responsive-dropdown-menu/full_screen_preview/4528828
Related
I'm not sure this code is written in the shortest and most effective way. Please help me.. How can i write in the shortest way? And how can I improve myself?
* {margin: 0;padding: 0;box-sizing: border-box;}
body {
background: #fff;
font-family: Arial;
}
a {
text-decoration: none;
color: #333;
}
nav {background-color: #f7f7f7;
width: 100%;
display: block;
}
nav ul {
list-style-type: none;
}
nav ul li {
display: inline-block;
position: relative;
}
nav ul:not(.sub-menu) > li {
padding: 15px;
}
nav ul:not(.sub-menu) > li + li {
margin-left: 20px;
}
nav ul li.has-children:hover ul.sub-menu {display: block;
}
nav ul.sub-menu {
position: absolute;
display: none;
white-space: nowrap;
/* Her bir liste öğesinin tek bir satır olması için. */
top: 100%;
}
nav ul.sub-menu li {
display: block;
}
nav ul.sub-menu li a {
display: block;
padding: 12px 20px 12px 10px;
background-color: #f7f7f7;
border-with: 0 1px 1px 1px;
border-color: #eee;
border-style: solid;
}
nav ul.sub-menu li a:hover {background-color: #eee;}
nav ul.sub-menu li + li a {
border-top: 0;
}
Well the code itself is pretty short. You can take care of a few points which will help you in the long run.
Try to minimise the use of > and +. As these are strictly bound to the structure of the DOM. If the DOM changes, styles with > or + might break.
Minimise the hierarchy. nav ul li can be replaced with nav li. Lesser the hierarchy, faster will be the DOM painting.
Something more you should do is separate the css in 2 parts.
Part 1: All element level css (lets call it normalize.css) and
Part 2: All class based css(lets call it styles.css).
Normalize.css now has the global styles for the html elements, which is common throughout your web page.
* {margin: 0;padding: 0;box-sizing: border-box;}
body {
background: #fff;
font-family: Arial;
}
a {
text-decoration: none;
color: #333;
}
nav {
background-color: #f7f7f7;
width: 100%;
display: block;
}
nav ul {
list-style-type: none;
}
nav li { // note that the `ul` is removed
display: inline-block;
position: relative;
}
style.css now containes all class based css which is independent of its position in the DOM.
.menu-item { // add a class `menu-item` to the immediate UL items in the <nav/>
padding: 15px;
margin-left: 20px;
}
.menu-item:first-child {// remove margin-left from the first-child
margin-left: 0;
}
.menu-item:hover .sub-menu {
display: block;
}
.sub-menu { // removing the unnecessary qualifiers. `.sub-menu` is enough
position: absolute;
display: none;
white-space: nowrap;
top: 100%;
}
.sub-menu-item { // add class `sub-menu-item` to the <li> of `.sub-menu`
display: block;
}
.sub-menu-item a { // you can further go ahead to add a special class to the `<a/>` inside `.sub-menu-item`
display: block;
padding: 12px 20px 12px 10px;
background-color: #f7f7f7;
border-with: 0 1px 1px 1px;
border-color: #eee;
border-style: solid;
}
.sub-menu-item a:hover {
background-color: #eee;
}
nav ul.sub-menu li + li a { // similarly you can remove the `+` with `:first-child` or the suitable.
border-top: 0;
}
Your css is accurate which is a good point. But if you want to make your life easier and not repeat yourself, I advise you to use a css preprocessor like Sass to write css like this :
nav {
background-color: #f7f7f7;
width: 100%;
display: block;
ul {
list-style-type: none;
li {
display: inline-block;
position: relative;
}
}
}
I have been trying to make my navbar responsive. So far I managed to display all li items underneath each other when the screen gets to small. However some li's of my navbar have sub items which normally drops down (Classes has 3 sub li's). When hovering one of the li's which has subitems it renders them through the main li items of the nav bar.
What I want is that the submenus dont get triggered by hovering, but only when the user taps their screen. Afterwards it should display the submenu items underneath the parent li and then continue with the other main li's.
The code underneath is the working part for the fullscreen nav bar.
Demo
.nav a {
text-decoration: none;
color: #fff;
display: inline-block;
padding-left: 15px;
padding-right: 15px;
border-bottom: none;
transition: .5s background-color;
}
.nav ul {
list-style: none;
background-color: #522d54;
text-align: center;
padding: 0;
margin: 0;
display: block;
}
.nav li {
font-family: 'Allerta', Helvetica, Arial, sans-serif;
width: auto;
line-height: 40px;
border-bottom: none;
font-size: 1em;
display: inline-block;
text-align: left;
}
.nav a:hover {
background-color: #39203b;
}
.nav a.active {
cursor: default;
background-color: #824885;
box-shadow: inset 0em -.2em #b084b3;
}
.nav ul li {
position: relative;
display: inline-block;
}
.nav ul li ul li {
text-align: center;
padding: 0;
width: 100%;
}
.nav li ul li a {
text-align: left;
font-size: .8em;
white-space: nowrap;
padding-left: 15px;
padding-right: 15px;
display: block;
}
.nav ul li ul {
position: absolute;
display: none;
width: inherit;
}
.nav li:hover ul {
display: inline-block;
}
You need to override your hover display with none, because you no longer want it to show on hover.
#media screen and (max-width: 650px) {
.nav li:hover ul {
display: none;
}
}
Then you will need to use javascript or jquery to add a class to the li on click:
jQuery could be something like (assumes you have class 'sub' on items with sub menus):
$('.nav li.sub').click(function() {
$(this).toggleClass('open-sub-menu');
});
New class is:
.nav li.sub.open-sub-menu ul {
position:relative;
display:block;
}
Thank you so much that truly did the trick. I am a complete jquery/js noob so this was extremely helpful. Somehow it took me 15 minutes to figure out I had not linked to jquery in the head tags.
For those with the same problem as me make sure to put this in between the tags of your html.
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
CSS
.nav {
margin-top: 0px;
margin-left: 0%;
}
.nav ul {
width: 100%;
height: auto;
background-color: #fff;
margin-bottom: 0px;
margin-top: 0px;
display: absolute;
z-index: 2;
/*top: -124px;*/
position: fixed;
border-bottom: 2px #009759 solid;
}
.nav ul li {
margin-top: 5px;
color: white;
list-style-type: none;
display: inline;
padding-left: 15px;
padding-right: 15px;
padding-top: 20px;
padding-bottom: 22px;
border-radius: 0px;
}
.nav ul li a
{
color: #009759;
text-decoration:none;
}
.nav ul li active {
color: #ff0000;
}
What is the best way to make a dropdown menu from one of my header menu buttons? I inlcuded my CSS file for the header but now I need you to tell me how to make a dropdown.
You can make a dropdown in many ways.. the usual method is by making javascript codes that will handle the hover event on the selected menu..
there are many good tutorials online that can help you.. like this dropdown with javascript
but if you are looking for pure css dropdown, you can also look at this link: dropdown pure css
You could use Jquery for this. I have done this before, and while it may seem a bit crude with the code, it works wonderfully.
$(".nav ul, .nav ul li, .nav ul li a").hide();
$(".nav").hover(function(){
$(".nav ul, .nav ul li, .nav ul li a").show(500);
});
I am trying to create a dropdown menu but the text always is dropping down to the right of where the original list item is. I have been messing with different text-align settings but cant seem to get it right. My HTML is available here. My CSS code is as follows:
#navMenu,
#navMenu ul {
list-style: none;
height: 10px;
}
#navMenu {
float: left;
}
#navMenu > li {
float: left;
padding-right: 15px;
}
#navMenu li a {
display: block;
height: 2em;
line-height: .75em;
padding: 0 1.5em;
text-decoration: none;
font: bold 12px Arial, Helvetica, sans-serif;
color: #000000;
text-align: end;
}
#navMenu > li > a {
color: #fff;
align: left;
text-align: left;
font-weight: bold;
}
#navMenu > li:hover > a {
background: #f09d28;
color: #000;
}
#navMenu ul {
position: absolute;
display: none;
align: left;
width: auto;
height: 50px;
background-color: #AAAAAA;
z-index: 999;
}
#navMenu ul li a {`enter code here`
list-style-position:inside;
}
#navMenu li:hover ul {
display: block;
}
The subnav ul creates a padding.
Give the subnav ul a padding: 0. This should help you out.
The browser is adding some left padding to ul by default. You need to remove that padding:
#navMenu ul {
padding: 0;
}
You may also want to consider using a CSS reset to prevent problems like these.
You have some additional padding to the left of the <ul> in the subnav. Fix it by adding this css:
#navMenu ul {
padding: 0;
height: auto;
}
Note: height: auto; fixes the height of the subnavs.
Also consider adding a CSS reset such as this one: http://www.cssreset.com/
Try this:
ul#navMenu ul {
padding-left: 0;
}
That will make sure you only hit your nested ul's and not the top-level ul's
I was just having a small problem and I'm not sure how to fix it. I'm still new to HTML and CSS and I was trying to get the drop down menu to work, but after looking at various tutorials I can only get it so when I hover over the parent folder the sub menu falls either to the left or right and not underneath the parent.
<ul id="navigate">
<li class="current"> Home</li>
<li> <a href = ".html" >A</a>
<ul>
<li>B </li>
</ul>
</li>
<li> C</li>
<li> D</li>
<li> E</li>
<li> F</li>
</ul>
Above is the portion of the code for my nav bar. html have files to them
This is my CSS:
/*
* Navigation Bar
*/
#navigate
{
padding: 0;
margin-top: 5px;
list-style-type: none;
color: black;
float:left;
width: 100%;
background-color: #00FF00;
}
#navigate li
{
display: inline;
position: relative;
}
#navigate li a
{
float: left;
width: 7em;
background-color: #00FF00;
text-decoration: none;
border-right: 1px solid #FFFFFF;
padding-left: 1em;
padding-right: 1em;
text-align: center;
}
#navigate li a:hover
{
background-color: #D1E751;
color: #26ADEA;
}
#navigate li.current a
{
background:#D1E751;
}
/*
* SubMenu
*/
#navigate li ul
{
display: none;
position: absolute;
padding: 0;
}
#navigate li:hover ul
{
display: inline-block;
}
Currently the code works in that it shows the submenu to the right of the parent menu. I'm not sure how to get it to fall directly below the parent menu, any help would be greatly appreciated. Or any tips if my code looks a little odd this is my first semester in HTML, CSS and programming in general.
Shows up like this (just showing the one menu
parent sub
----------------------------------
A | B |
----------------------------------
I would like it to look like this
------------
A | Parent
------------
B | sub
------------
Thanks in advance
------------------------------ UPDATE 5/9/2014 ----------------
So now I've managed to get it to work, but when it shows up it moves the content....
------------
A | Parent
------------
contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent
------------
A | Parent
------------
B | sub contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent
------------
contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent
i'm thinking it might have to do with the float:left and where I've cleared the float or the positioning. When I add a position: absolute it just moves the sub menu over the parent menu though.
Updated Code
/*
* Navigation Bar
*/
#navigate
{
padding: 0;
margin-top: 5px;
list-style-type: none;
color: black;
width: 100%;
background-color: #00FF00;
position: relative;
}
#navigate li
{
float: left;
padding-right: 2px;
}
#navigate li a
{
float: left;
width: 7em;
background-color: #32CD32;
text-decoration: none;
text-align: center;
border-radius: 25px;
padding: 5px;
margin: auto;
}
#navigate li a:hover
{
background-color: #D1E751;
color: #26ADEA;
}
#navigate li.current a
{
background:#D1E751;
}
/*
* SubMenu
*/
#navigate ul
{
display: none;
list-style: none;
padding: 0;
}
#navigate ul li
{
clear: left;
display: block;
}
#navigate li:hover ul
{
display: block;
}
Thanks in advance.
--------Update few mins later >.< -------
I ended up putting it all in a div and formatting the div now it works.
/*
* Navigation Bar
*/
#navigate
{
padding: 0;
margin-top: 5px;
list-style-type: none;
color: black;
width: 100%;
background-color: #00FF00;
position: relative;
}
#navigate li
{
float: left;
padding-right: 2px;
}
#navigate li a
{
float: left;
width: 7em;
background-color: #32CD32;
text-decoration: none;
text-align: center;
border-radius: 25px;
padding: 5px;
margin: auto;
}
#navigate li a:hover
{
background-color: #D1E751;
color: #26ADEA;
}
#navigate li.current a
{
background:#D1E751;
}
/*
* SubMenu
*/
#navigate ul
{
display: none;
list-style: none;
padding: 0;
}
#navigate ul li
{
clear: left;
display: block;
}
#navigate li:hover ul
{
display: block;
}
.nav
{
position: absolute;
z-index: 2;
margin: auto;
}
changes made to html just enclosed in
I understand that you have difficulty with your pop-up menu, if so, here's one of the solutions
DEMO
I think it will help if you add top position to ul element.
#navigate li ul
{
display: none;
position: absolute;
padding: 0;
top: 100%;
left: 0;
}
#navigate li:hover ul
{
display: block;
}
Here display: block; will be more apropriate, I think.
when you set
#navigate li
{
display: inline;
position: relative;
}
it applies it to all of the li elements including the submenu, which means all the li align horizontally including the submenu, because of the display: inline;
so change it to
#navigate > li
{
display: inline;
position: relative;
}
to target only direct li children
and give your submenu ul a class mySubmenu and set its position to absolute:
.mySubmenu
{
position:absolute;
}