CSS help - aligning megamenu - html

I'm following this tutorial and am trying to modify it to my use: http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-a-kick-butt-css3-mega-drop-down-menu/...
If I make the dropdown div to be the same full width as the horizontal menu bar, how do I make sure it's aligned with the menu bar?
I have found that I can change the left declaration in the following CSS rules to get the dropdown to align with the menu bar.
#menu li:hover .dropdown_1column,
#menu li:hover .dropdown_2columns,
#menu li:hover .dropdown_3columns,
#menu li:hover .dropdown_4columns,
#menu li:hover .dropdown_5columns {
left:-1px; /* <-- change this to left: -150px (or whatever value will get it to align) */
top:auto;
}
But this doesn't seem like the best way for me to do this as different browsers render the menu slightly differently and therefore require different values in order to get the drop down to align.
What's a better way to get the dropd down to align with the menu bar? Or perhaps someone can point me to a better tutorial?
I've copied the code from the tutorial to this: http://jsfiddle.net/Pnn6V/. Please disregard the slight issues with the jsfiddle as it's not the problem I'm facing/not what I'm asking about.

You are changing alignment of the menus from tutorial so some css settings also need to change to get the desired effect.
I would like the dropdown div to be the same full width as
the full horizontal menu bar and be aligned with the menu bar.
In tutorial it says
In order to have a perfect drop down container, we need to specify the
width for each one
.dropdown_1column {width: 140px;}
.dropdown_2columns {width: 280px;}
.dropdown_3columns {width: 420px;}
.dropdown_4columns {width: 560px;}
.dropdown_5columns {width: 700px;}
So you are supposed to adjust all the widths according to your need.
what I have done in your css is
#menu li .align_right {
/* Rounded Corners */
/*-moz-border-radius: 5px 0px 5px 5px;
-webkit-border-radius: 5px 0px 5px 5px;
border-radius: 5px 0px 5px 5px;*/
}
#menu li:hover .align_right {
/* left:auto;
right:-1px;*/
top:auto;
}
I removed right border of your 1column because in tutorial it was having different alignment (it was in right) and what you are doing with this 1column is you are putting this on left so right border have to be removed. that was the main reason.
see this output
Output
jsfiddle
There are so many tutorials for mega drop down menu it depends on your need, please take a look if they suit your need.
Jquery and css dropdowns
And i would suggest you to read the tutorial carefully and change css accordingly/oppositely , that will clear so many css doubts/concepts of yours and soon you will learn CSS easily.
and that day is not far when you will be answering css questions here :)
EDIT :
According to your comment i understood this :
Jsfiddle
Output
what I have done is :
I changed the width accordingly:
.dropdown_1column {width: 930px;}
.dropdown_2columns {width: 931px;}
.dropdown_3columns {width: 930px;}
.dropdown_4columns {width: 932px;}
.dropdown_5columns {width: 932px;}
Previously left property was applying on all column which was incorrect you have to apply individual left value in each as per I dont
#menu li:hover .dropdown_1column
{
left:-841px;
top:auto;
}
#menu li:hover .dropdown_2columns
{
left:-2px;
top:auto;
}
#menu li:hover .dropdown_3columns
{
left:-736px;
top:auto;
}
#menu li:hover .dropdown_4columns
{
left:-248px;
top:auto;
}
#menu li:hover .dropdown_5columns {
left:-110px;
top:auto;
}
Hope this is clear...

You can try adding a css reset in your page to reduce browser inconsistencies
http://meyerweb.com/eric/tools/css/reset/

Related

What's wrong with my dropdown menu?

I am currently learning CSS and HTML and I wanted to build a basic dropdown menu using CSS only. There are some things that I don't understand if someone could help me figure out what is going on.
Here's how it looks
http://liveweave.com/eTdt7V
Why is my Menu 1 being pushed at the top of the nav? How can I avoid that?
Why is my Submenu 1 to the right of the Menu 1? How do I fix it?
The height of my submenu is overflowing over the first UL. Is that supposed to be?
Hopefully someone can help me understand what's going on here that would be a valuable lesson for myself. I know I could find an online tutorial but I feel that starting from scratch is a better leaning opportunity, but right now I am stuck.
Thanks!
Ok here are some point (i still suggest you find some page like w3chool or here or whatever page you can find to learn more or fully understand your problem)
Menu 1 pushed away because you set your 2nd ul with visibility:hidden - it hidden but still take same space (width and height), so if you change that to display:none and remove height:100px in your 1st ul it will become one line and smooth (don't set height to ul, especially when it have 1 or more ul inside, it will ruin your menu)
Your Submenu 1 to the right of the Menu 1 because, uhm not sure how to say so i skip to solution to solve this. To position your submenu, i suggest use position:absolute with margin to position your submenu (beside your main menu if vertical menu or below if horizontal)
This is your new CSS after i modify a bit
body {margin: 0; padding: 0;}
nav {background-color: pink; margin: 0; padding: 0; height: 100px;}
ul {list-style: none; width: 50%; background: yellow; margin: 0 auto}
li {display: inline-block; background-color: green; width: 100px; height: 50px}
a {text-decoration: none;}
ul > li > ul {display: none; position: absolute; margin: 35px 0 0 -40px;}
ul > li:hover > ul {display: block;}
ul > li > ul li {display: block;}
And this the new DEMO
Hope you lucky with learning HTML and CSS!

Horizontal menus with submenus of full width CSS jfiddle included

I'm looking to make a horizontal drop down menu much like the main menu from HowStuffWorks: http://home.howstuffworks.com/community-living
Notice how the submenu covers the full width of the horizontal main menu bar, rather than dropping down in vertical lists. And how the currently selected main menu item and sub menu items are highlighted. I would like those features, with the added bonus of showing the other sub menu lists when hovering over the other main menu items, please look at examples below:
Basically I want to combine the effect of showing different submenu lists as you hover over the links as in this one:
http://jsfiddle.net/SKNYC/
And also having the currently selected menu highlighted in a different colour, as in this one:
http://jsfiddle.net/pRT6S/
.full-width {
width: 100%;
}
.normal-width {
width: 1024px;
margin: 0 auto 0 auto;
}
.main-menu > li {
float:left;
list-style-type:none;
padding-right:30px;
}
.sub-menu {
display:none;
}
.sub-menu li {
float:left;
padding-right:30px;
}
.sub-menu li:hover ul {
float:left;
padding-right:30px;
background-color:green;
}
.main-menu li.active {
background-color:blue;
}
.main-menu > li.active .sub-menu {
display:block;
position:absolute;
left:0;
right:0;
background-color:blue;
}
Note that I'm very new to CSS/HTML, it would be nice to get some direction as to how to proceed. :)
The first jfiddle is modified from this code:
https://gist.github.com/jgoyon/3993263
The second and third jfiddle comes from someone's code in this thread:
CSS full-page-width horizontal menu and horizontal submenu
EDIT:
Another code that I spotted that is very similar to my solution is this one:
http://jsfiddle.net/U65eT/
but I'm not sure why when the hover over item1 and item2 doesn't work?
EDIT:
Current revision
http://jsfiddle.net/pRT6S/4/
It is almost correct, just has the problem of not showing the submenu when hovering over item1
How's this? Check the comments I made.
http://jsfiddle.net/pRT6S/3/
The main problem was needing to modify .main-menu, not .sub-menu, as seen below:
/*Not doing this right*/
.main-menu li:hover ul { /* This needs to be .main-menu, not .sub-menu! */
display: block;
/* float:left; */
position: absolute; /* better than float in this case */
padding-right:30px;
background-color:green;
left: 0; /* make sure everything hangs on the left */
}
Update: You can use the code you originally provided (that I wrongfully commented out), but modify it a bit my adding absolute positioning and z-indexes:
http://jsfiddle.net/pRT6S/5/

Adapted width in CSS dropdown menu

I'm making a dropdown menu with only CSS, and it's not turning out easy the way I've done it. So far I've got an actual dropdown, but the width is the width of the parent element, which is too small for certain items to be displayed in one line.
I tried setting a manual width, but that just unaligns the whole thing and isn't pratical as the menu item could be much longer. Is there anyway of having a width that adapts to the content, without changing the parent width ?
All the site files are located here : http://dev.cuonic.com/bourree/
Index page : http://dev.cuonic.com/bourree/index.html
Stylesheet : http://dev.cuonic.com/bourree/css/style.css
Any help is appreciated, thanks :)
Here's a solution that doesn't use a fixed-width for the drop-downs.
First, add the following to the CSS for the links in the drop-downs:
#menu ul ul li a {
white-space: nowrap;
}
I also had to change #menu ul and #menu ul li to #menu > ul and #menu > ul > li, respectively, so that those CSS styles would apply only to the first level menu items.
Here's a basic reference about the use of > in CSS selectors. I think there are other spots in this example where it would help:
http://reference.sitepoint.com/css/childselector
Playing around in firefox/firebug I found that this combination seemed to produce the desired effect:
#menu ul ul li {
display: block;
float: left;
left: -34px;
position: relative;
width: 200px;
}

Navigation alignment issue

I have a sprite, consisting of 4 bubbles that I will use for the selected version of my navigation, that looks like this:
The best example of what I'm trying to achieve that I can find is Dribbble. Look at the header navigation selected navigation. They are using a bubble similar to mine to cover the "Jobs" link, except they use pure css to achieve the look, whereas I'm using images.
Here's my code:
.inline-block{
/* Inline block class for li navigation */
display:-moz-inline-stack;
display:inline-block;
zoom:1;
*display:inline;
}
#header li a{
width:40px; /* without padding = 110px*/
height:15px; /* without padding = 31px*/
padding:8px 35px;
}
#header li a.selected{
background: url('../img/btn-header-sprite.png') 0 -1px;
display:inline-block;
}
#header li a{
color:#FFF;
font-weight:bold;
font-size:15px;
}
#header li:hover{
background-position:0 -34px;
}
#header li:active{
background-position:0 -67px;
}
Right now it looks like this:
I'm having to individually align the padding for each one, and as you can see, if the padding is not correct, the text is not centered in the bubble. Is there a better way to format this, than individually giving padding to each bubble?
Thanks for all help! If you need more clarification, just say!
You can try
display:table-cell;
vertical-align: middle;

How to make text of anchor tag to appear in center when the li element is circular

I am trying to make a horizontal navigation menu , My menu items (li) elements are in shape of circle here is the demo , my question is the text of the link is appearing on top , how do I make it to appear on center , will that be possible , please let me know that , any suggestions are welcome.
Thanks
Only block items can use margins and padding. Anchor tags are inline elements. You need to force them to be block elements in your CSS:
#menu ul li a
{
text-decoration:none;
display:block;
padding:30px 0 0 0;
}
And if text flows over 2 lines, you can use this to keep it in the middle:
#menu ul li a
{
display:table-cell;
vertical-align:middle;
height:85px;
width:35px;
}
And the answer to your second question:
#menu ul li:hover
{
background:red;
}
To answer your second question posted in response to Diodeus:
If you want to use pure css3 hover effect, you'll want to do something similar to this by using the :hover selector:
#menu ul li a:hover {
background-color: #000000;
}
For nice effects, use the CSS3 transition property which you can see here:
http://www.w3schools.com/css3/css3_transitions.asp
Rather than messing with vertical align, set the line-height equal to the height/width of the circle.
Your issue with the red background not taking was that the specificity of the selector it was declared in: li:hover was not high enough to overcome the original bg color declaration in #menu ul li.
See here: http://jsfiddle.net/Az8cG/11/ for both fixes.
I just played with your fiddle. What i did is just made "li" display:inline-block & changed li:hover to #menu li:hover.
#menu ul li
{
float:left;
display:inline-block;
padding:40px 30px;
background-color:slategray;
margin:0 20px 0 0;
height:17px;
-webkit-border-radius:50px;
}
#menu li:hover
{
-webkit-box-shadow:0 0 50px 12px #69CDF5;
background:#cb2326;
}
Please check the fiddle here: http://jsfiddle.net/Az8cG/15/