Having a few issues implementing a dropdown menu for the responsive side of my website.
The cells are automatically padded apart from the top, and addding padding to the top to centre the text seems to increase padding on ALL sides.
The cells have an even padding using an IE browser, but on firefox the height gos haywire.
The method Im implementing uses :hover for the dropdown menu, will this cause problem on a mobile device?
Ive spent many days going through different methods for dropdown menus, is there a simpler or more standard way of implementing these?
(I'd prefer not to use javascript as I havent learnt the basics yet and like to understand what Im programming)
Really appreciate any help with this. Thankyou.
---HTML----
<div class="dropdown">
<ul class="nav">
<li><img class="btn" src="images/menuIcon.png"
alt="Menu button" />
<ul class="menu">
<li>Home</li>
<li>Holistic Massage</li>
<li>About Duncan</li>
<li>Testimonials</li>
<li>Prices</li>
<li>Contact</li>
<li>Location</li>
</ul>
</li>
</ul>
</div>
---/HTML---
----CSS----
.dropdown{
position: relative;
display: inline-block;
}
.dropdown .menu {
position: absolute;
top: 100%;
display:none;
margin: 0px;
padding: 0px;
list-style: none; /** Remove list bullets */
width:120%;
padding: 0;
z-index:1;
}
.dropdown ul {
list-style: none;
overflow: hidden;
}
.dropdown ul li ul li{
float: none;
padding-top:10%;
background-color: #E5E5E5;
text-align:center;
border:1px solid grey;
}
.btn {
display: block;
}
.menu li a{
padding:0px;
}
.menu li a{
font-family: gabriola, Verdana, Geneva, sans-serif;
font-size: 6vw;
font-weight: bold;
text-decoration: none;
color: #505050;
}
ul li:hover .menu {
display: inline-block;
}
---/CSS----
You're using font-size: 6VW; which means viewport width, its responsive to the screen width, I'd use %, em or px.
Use :focus for touch devices.
Related
I am trying to make a navigation menu for a simple html/css site, it uses blocks and unorganized lists to add items to the navigation.
The problem is that I want my navigation to be centered, right now it floats from left to right, is there another way of aligning the listed div other than making it float right? I tried using left:20; but didn't work, here is the code.
As I say, just need that to center slightly to the right, I am making it float to the left so that it organizes the list properly, without it, it'd be a messy list, try it and you'll see what I mean... Thanks for help! :D
body {
font-family: Arial;
}
#nav { /*indexed so I can see it over a content div.*/
z-index:0;
}
ul {
margin: 0px;
padding: 0px;
list-style: none;
}
ul li {
float: left;
width: 8%;
height: 40px;
background-color: #000000;
opacity: 0.8;
line-height: 40px;
text-align: center;
font-size: 90%;
}
ul li a {
text-decoration: none;
color: white;
display: block;
}
ul li a:hover {
background-color: green;
}
ul li ul li{
display: none;
}
ul li:hover ul li {
display: block;
margin-left: 0%;
width: 100%;
background-color: #000000;
}
<div id="nav">
<ul>
<li>Attractions
<ul>
<li>Our Team</li>
<li>Camp Sites</li>
<li>Mission & Vision</li>
<li>Resources</li>
</ul>
</li>
<li>Plan Visit
<ul>
<li>Activities</li>
<li>Parks</li>
<li>Shops</li>
<li>Events</li>
</ul>
</li>
<li>Birthdays
<ul>
<li>Map</li>
<li>Directions</li>
</ul>
</li>
</ul>
</div>
This, I think, gives the nicest result:
#nav {
left:40%
position:relative;
}
When using float, be careful using it without a clearfix hack. A float could end up collapsing your entire site. Link for it here, also an explanation: https://www.w3schools.com/howto/howto_css_clearfix.asp
This is a simple dropdown menu. It's a free template that uses webkit (only learning about what this is). I'm not very good with CSS and I can change so that the dropdown menu will not push the other content down the page, but this creates other problems.
The other problems being that the background of the dropdown menu is no longer red, but transparent and the transition doesn't work.
Additionally, even with a transparent background, when I hover over the dropdown menu, I cannot hover over the entire list without the menu collapsing. For example, in the list below, there are 4 items, Basic, Basic Plus, Ultra, and Ultra Plus. When I've set the ul to position:relative the menu no longer pushes the rest of the content down the page, but when I try to hover over Ultra, the menu goes away.
Here is where I'm developing it:
http://www.oklahomastepparentadoption.com/truck-web/index.php
I really like how the transition works on the entire drop down menu (slide down from the top).
This is the CSS code (HTML below)
.top-nav{
float: right;
width: 70%;
}
.top-nav ul{
padding:0;
margin:0;
}
.top-nav ul li{
display: inline-block;
width: 18%;
margin-right: .4em;
float: left;
position: relative;
}
.top-nav ul li.active{
background: #bb1e10;
}
.top-nav ul li a{
color: #FFF;
font-size: 18px;
margin-right: .4em;
float: left;
padding: 1em 0em 1em 1.4em;
text-align: center;
width: 79%;
}
.top-nav ul li a i{
display: block;
margin-top: 1em;
color: #FFF;
font-size: 11px;
font-style: italic;
}
.top-nav ul ul {
display: none;
left:0;
float: left;
position: relative;
}
.top-nav ul ul li {
float:none;
width:200px;
z-index: 1;
}
.top-nav ul ul li a {
padding: 5px 5px;
}
.top-nav ul li:hover > ul {
display:block;
HTML CODE:
<div class="top-nav">
<span class="menu"><img src="images/menu.png" alt=""></span>
<ul class="nav1" style="margin-top: .5em;">
<li class="hvr-sweep-to-bottom active">Home</li>
<li class="hvr-sweep-to-bottom" style="width:22%;">Fleet Management
<ul class="level_1">
<li>Basic</li>
<li>Basic Plus</li>
<li>Ultra</li>
<li>Ultra Plus</li>
</ul>
</li>
<li class="hvr-sweep-to-bottom">Broker Agency</li>
<li class="hvr-sweep-to-bottom">Drivers</li>
<li class="hvr-sweep-to-bottom">Contact</li>
<div class="clearfix"> </div>
</ul>
Add position: absolute to the menu. Also make sure to update the top and background:
.top-nav ul ul {
display: none;
left: 0;
/* Changes below */
float: none;
position: absolute;
top: 62px;
background: #bb1e10;
}
Preview
Update
Add this to the .header:
.header {
position: relative;
z-index: 10000;
}
Fixes the last links:
Exactly as Praveen says, you need to make the nav absolutely positioned. Make sure though, the container 'header' is relative positioned, else it will fill 40% of the whole screen.
check out this fiddle to see what i mean: https://jsfiddle.net/ho2sph79/
.header {
position:relative;
}
.top-nav {
position:absolute;
width:40%;
top:0;
right:0;
}
you can try this http://callmenick.com/post/slide-down-menu-with-jquery-and-css and as i noticed, your css for the dropdown doesnt have any transition elements. try the link i provided it may help you out regarding transitions
here is a simple bug i don't know what is going on. the problem is, i have a menu in HTML.the menu actually contains anchor tags but some links are working and others are not even clickable. any help would be appreciated. Thanks a jug
PS:i have same directory for all pages but some are working and other don't.
this is my code for menu.
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Menu</li>
<li>Price</li>
<li>Contact</li>
</ul>
When i go to ABOUT or SERVICES page, i can not go anywhere else because no anchor tag works.
this is my css for menu
#menu
{
background-color:brown;
width:100%;
height:auto;
float:left;
clear:both;
}
#menu ul {
list-style: none;
padding: 0px;
//margin-left:auto;
width:900px;
}
#menu li {
list-style: none;
padding: 0px;
display: inline;
}
#menu a {
float: left;
width: 150px;
height: 40px;
display: block;
text-align: center;
text-decoration: none;
color: #ffffff;
font-weight: bold;
padding-top: 17px;
font-size: 15px;
}
#menu a:hover{
color:#BAD1F3;
}
The problem is the headings on your "Services" and "About Us" page have a padding that overlaps the links. Remove position: relative; from the headings and you will find the links are clickable again.
Menu is floated and overlapped by below element. Add overflow: hidden; to #container and it will clear the float.
I am having some problem getting my navigation bar to work. Here is the desired output for my navigation bar: example.
I am trying to make it so that when the user hovers the top level of the navigation bar, a drop down list is shown.
However, the second level of my navigation bar is just floating around. How can I style it?
This is my HTML:
<div id="menubar">
<ul id="menu">
<li class="selected">Home</li>
<li>Volunteers
<ul>
<li>Add</li>
<li>View</li>
<li>Update</li>
</ul>
</li>
<li>Packaging Session
<ul>
<li>Add</li>
<li>View</li>
<li>Update</li>
</ul>
</li>
</ul>
</div>
And this is my CSS:
#menubar
{ width: 900px;
height: 72px;
padding: 0;
background: #1293EE;}
ul#menu, ul#menu li
{ float: left;
margin: 0;
padding: 0;}
ul#menu li
{ list-style: none;}
ul#menu li a
{ letter-spacing: 0.1em;
font: normal 100% arial, sans-serif;
display: block;
float: left;
height: 37px;
padding: 29px 26px 6px 26px;
text-align: center;
color: #FFF;
text-transform: uppercase;
text-decoration: none;
background: transparent;}
ul#menu li a:hover, ul#menu li.selected a, ul#menu li.selected a:hover
{ color: #FFF;
background: #0D66A5;}
ul#menu li ul li a
{
display: none;
height: auto;
margin: 0;
padding: 0;
position:absolute;
}
In google chrome:
In Internet Explorer:
Instead of hiding every a tag in the dropdown, rather hide the entire ul, and use that as the position element, and style the li's and a's as any other element.
Example: http://jsfiddle.net/gd2SX/
Look for the area, that says "Added styles".
HTMLDog made a very interesting and comprehensive article about floating menus: Sons of Suckerfish.
You will be particularly interested in the part about dropdowns, and particularly the sample they provide.
It will help you correct much more than just your floating problem.
For your particular problem, I suggest that you disable the hiding of the menus, style everything to look perfect as if all the submenus were open, and then re-activate the hiding of submenus:
/* Lists directly inside list-items. */
li>ul {
display: none;
}
/* Lists directly inside hovered list-items. */
li:hover>ul,
li.selected>ul {
display: block;
}
Then you will find it much easier to fix.
I am trying to make the font size bigger for first two letters of nav links. I know for first letter it can be achieved using :first-letter. However I have tried it using span like below and it's increasing the font size but not getting aligned horizontally. About and Contact links are moving to top, both should be aligned with rest of the links (from bottom). I don't want to set line-height to the main container because the sub links are supposed to display below the main links. Any idea about this?
<li><span>01</span> Architectural Design</li>
CSS
ul li a span {
font-size: 25px;
}
.nav {
font-family: arial;
background: #dddddd;
overflow: hidden;
padding: 10px;
}
a {
color: #000;
text-decoration: none;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
font-size: 12px;
float: left;
margin-right: 30px;
}
ul li a span {
font-size: 25px;
}
<div class="nav">
<ul>
<li>About</li>
<li><span>01</span> Architectural Design</li>
<li><span>02</span> Media</li>
<li><span>03</span> Developments</li>
<li>Contact</li>
</ul>
</div>
you may try this... old school but useful
<div class="nav">
<ul>
<li><span> </span>About</li>
<li><span>01</span> Architectural Design</li>
<li><span>02</span> Media</li>
<li><span>03</span> Developments</li>
<li><span> </span>Contact</li>
</ul>
</div>
If you add vertical-align:top to the span, it will align the words after the span to the top of the span
Fiddle
Other properties include
middle
bottom
baseline
I would set the line-height of the li elements.
li{
font-size:12px;
float:left;
margin-right:30px;
line-height: 25px;
}
JSFiddle
I know you mentioned that you
don't want to set line-height to the main container
but will this work for you?
It can only be used with the pseudo elements :before that make your code much cleaner and easy to read.
.empty:before {
content: "";
font-size: 25px;
}
.nav {
font-family: arial;
background: #dddddd;
overflow: hidden;
padding: 10px;
}
a {
color: #000;
text-decoration: none;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
font-size: 12px;
float: left;
margin-right: 30px;
}
ul li a span {
font-size: 25px;
}
<div class="nav">
<ul>
<li><a class='empty' href="#">About</a></li>
<li><span>01</span> Architectural Design</li>
<li><span>02</span> Media</li>
<li><span>03</span> Developments</li>
<li><a class='empty' href="#">Contact</a></li>
</ul>
</div>