I want to make my navigation menu to be dropdown. I tried different ways, but nothing happend.
This is my HTML code:
<ul>
<li>Home</li>
<li>Geography</li>
<li>English</li>
<li class="icon">
☰
</li>
</ul>
And this is my CSS code:
ul {
padding: 15px;
margin: -10px;
overflow: hidden;
list-style-type: none;
background-color: #171B29;
}
li {
float: left;
}
li a {
display: inline-block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 0.3s;
font-size: 17px;
}
li a:hover {
background-color: #555;
}
li icon {
display: none;
}
#media screen and (max-width:680px) {
ul.topnav li:not(: first-child) {
display: none;
}
ul.topnav li.icon {
float: right;
display: inline-block;
}
}
#media screen and (max-width:680px) {
ul.topnav.responsive {
position: absolute;
}
ul.topnav.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
ul.topnav.responsive li {
float: none;
display: inline;
}
ul.topnav.responsive li a {
display: block;
text-align: left;
}
}
When I try to make a dropdown menu, the whole menu becomes very bad. I know that my code is very bad for reading but I will appreciate it if someone have a solution. Thank you in adva
You should try to find answer on http://www.w3schools.com/css/css_dropdowns.asp
Webpage have pretty decent content and its easy understandable.
Have you included the JavaScript too? You are specifying a toggle (myFunction) on click so you need the JavaScript too.
Of course you can just use HTML and CSS for dropdowns, as listed in the post above.
If your issue is that you want the <li> elements to be stacked vertically, you can solve this quite simply using flexbox. Additionally, if you were planning on effecting the "drop-down" effect with just HTML & CSS, you need to add a :hover pseudoclass on the top-level element from which the navigation menu derives. In the example I'm linking to below, I did so on the <ul> element. Alternatively, you'd use the mouseover event in JavaScript.
Additionally, note that the li icon CSS selector you used is not actually a valid selector. There is no actual icon tag in HTML, although many people use the <i> tag as a container for icons.
https://jsfiddle.net/IsenrichO/8t4jhvcs/20/
Related
I'm trying to make a sample website about photography, and as I start with my navigation bar, I have come to the issues of the background color not working. I have tried many things like putting an Id to call my nav on my CSS file. I have also tried using div, nav or even using a class and it won't work. I am sorry if this might be an easy fix but I am new to this.
body , html {
background-color: #F7FDFF;
}
div {
background-color: #000;
}
ul {
list-style-type: none;
}
li a {
display: block;
}
ul li a {
text-decoration: none;
float: right;
text-align: right;
color: black;
padding: 1.5em;
}
li a:hover{
display: block;
background-color: #B5B5B5;
color: #000;
}
.active {
background-color: green;
}
#navbar {
background-color: rgb(18, 171, 209);
}
<div>
<nav id="navbar">
<ul>
<li class="active">Home</li>
<li>Gallery</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</div>
Because your anchor tags are floated and there are no other non floated elements, your nav element collapsed. To fix these follow below steps.
Create a clearfix class like this. It will stop your nav element from collapsing.
.clearfix::after {
content: " ";
display: block;
height: 0;
clear: both;
}
and add this class to your nav element
Remove the float: right; rule from your anchor element, aka from ul li a selector. Right now, because of this rule, your last element becomes the first menu, aka "Contact" became first menu and "Home" became last. To understand why this happend read this.
Add a new rule float: left; for your li element. If you don't add this rule, your li elements each will take a seperate line, because by default li elements are block level elements. To keep them in the same line you have to add this rule. You can also add display: inline-block to change its default display property from block to inline to keep them in the same line. But there is a small problem with this solution, you will notice a small gap between inline-block elements. If those small gaps are not a problem for your design then go ahead and use display: block; rule, otherwise use float: left;. (To understand the difference hover over the menu next to the active menu)
Add two more rules float: right; and margin: 0; for your ul element. This will move your menu to the right as you intended. margin: 0; is there to remove the extra margins. You can change/delete this rule as per your design.
<!DOCTYPE html>
<html>
<head>
<link href="Css/Stylesheets.css" rel="stylesheet">
<meta charset= utf-8>
<meta name="viewport" content="width= device-width, initial-scale=1.0">
<title>LTphotography</title>
</head>
<style>
body , html {
background-color: #F7FDFF;
}
div {
background-color: #000;
}
ul {
list-style-type: none;
float: right;
margin: 0;
}
li {
float: left;
}
li a {
display: block;
}
ul li a {
text-decoration: none;
text-align: right;
color: black;
padding: 1.5em;
}
li a:hover{
display: block;
background-color: #B5B5B5;
color: #000;
}
.active {
background-color: green;
}
#navbar {
background-color: rgb(18, 171, 209);
}
.clearfix::after {
content: " ";
display: block;
height: 0;
clear: both;
}
</style>`
<body>
<div>
<nav id="navbar" class="clearfix">
<ul>
<li class="active">Home</li>
<li>Gallery</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</div>
</body>
</html>
Your containing li's are collapsing because they contain floated content. You need to add a clearfix to your li items.
.clearfix::after {
content: "";
clear: both;
display: table;
}
<ul>
<li class="clearfix"></li>
// and so on
</ul>
https://www.w3schools.com/howto/howto_css_clearfix.asp
That said, you can also simply remove float: right from your anchor elements. It shouldn't be necessary.
I want to create a horizontal navigation bar on one of my pages, so I used a list and then edited it in CSS. However, the same page also has other lists, and when I have applied the styling it has worked for the nav bar, but has completely destroyed the other lists! How do I get round this? I've tried ID tags but I don't know if they overrule applying a certain style to all lists? This is my CSS code:
#menubar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #85aff2;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
All lists on the page are 'standard' lists, i.e. they are all bog standard <ul> or <ol> with no id tags - apart from the navigation bar list, which I have called 'menubar'.
For the menubar styles you need to apply the id like #menubar also for its child elements if you only want them to apply inside the menubar
see example:
#menubar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #85aff2;
}
#menubar li {
float: left;
}
#menubar li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
<ul id="menubar">
<li><a>one</a></li>
<li><a>two</a></li>
<li><a>three</a></li>
</ul>
<ul>
<li><a>normal one</a></li>
<li><a>normal two</a></li>
<li><a>normal three</a></li>
</ul>
the problem with your CSS is that you apply styles to all 'li' and 'li a' elements. The best way to get this to work is to be a bit more specific to where you want to apply the CSS.
Try the following (using your code above).
#menubar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #85aff2;
}
#menubar li{
float: left;
}
#menubar li a{
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
If you don't specify an ID or a class the style will affect every matching element.
In your example, you style elements with the id "menubar", and then you style ALL "li" elements and lastly all "li" and "a" elements.
If you wish to apply your style only to items in your navigation menu, you could give them a class like "nav_menu", and write the style like this:
.nav_menu {
float: left;
}
.li_and_a {
display: block;
color:white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
so your list items with the float now need the class "nav_menu" and the list items and the a items need the "li_and_a" class.
Doing this will not impact any other "li" or "a" elements on your page unless they have that specific class.
There are several ways to resolve this, but I think that at this point, the most practical way would be to use the :not() selector with your lists and exclude the #menubar.
For example, if your #menubar is a id for a li, you could add it like this:
li:not(#menubar) {
/* your css */
}
li:not(#menubar) a {
/* your css */
}
EDIT 28/02
My understanding is that you have your horizontal bar with the #navmenu and the rest of your CSS you do not want to take effect in it.
If that is what you want, this solution does work. As it was tested on jsfiddle.
https://jsfiddle.net/a2kj8vds/
I'm trying to make my website accessible via mobile and have arranged it so below a certain size the menu bar at the top turns into a dropdown. Unfortunately it works with hover so when I try to use it on my mobile nothing happens at all. Can anyone suggest how I would alter the code to make it work with touch?
html
<nav id="nav_mobile" role="navigation">
<ul>
<li>Home</li>
<li>News</li>
<li>Gallery</li>
</ul>
</nav>
CSS
#nav_mobile {
position: relative;
padding-top: 2%;
margin: 0px auto;
}
#nav_mobile ul {
width: 100%;
text-align: center;
position: absolute;
background: #F8F8F8;
min-height: 50px;
background-image: url('../img/Menu_button.png');
background-repeat: no-repeat;
background-position: 50% 0%;
}
#nav_mobile li {
display: none;
margin: 0;
border-bottom: 1px solid #ceced6;
background: #070707;
}
#nav_mobile #current {
display: block;
}
#nav_mobile a {
display: block;
}
#nav_mobile #current a {
background: none;
color: #666;
}
#nav_mobile ul:hover {
background-image: none;
}
#nav_mobile ul:hover li {
display: block;
}
Happy to include jQuery in the code if I need to but I'd like to keep it to just css if I can.
EDIT
I've changed the hover to active and added ontouchstart="" to the body tag. The result is the menue now activates but doesn't stay active long enough for you to select a link.
use the :active pseudoclass. It should work, but in some browsers you need a small hack to make it work : attach an event handler to the touchstart event on the body (ex:<body ontouchstart="">)
You could create 2 separate menus - one for regular screens and one for mobile and do something like this:
#nav_mobile {display: none;}
#media (max-width: 480px) {
#nav_mobile {display: inline-block;}
#nav_regular {display: none;}
}
I want to reduce the spacing of each menu or compress the image a little bit and inline it next to logo. What is the best way to do that?
Here's my site
Here's the CSS of menu:
.main-navigation.menu-right{
text-align: right;
#site-navigation .main-navigation .ak-container{
padding: 0;
.main-navigation .menu{
display: block;
.main-navigation ul {
list-style: none;
margin: 0 auto;
padding: 0;
}
.main-navigation li {
display: inline-block;
position: relative;
line-height:48px;
font-size:18px;
text-transform: initial;
color:#ababab;
text-align: center;
white-space: nowrap;
}
.main-navigation a {
display: block;
text-decoration: none;
color: #000000;
padding: 0 18px;
}
A couple of ways you could solve this. The first as a commenter suggests is to start by putting your site-navigation inside your ak-container, so your HTML should be structured this way:
<div class="ak-container">
<div class="site-branding">existing code</div>
<div class="right-header clearfix">existing code</div>
<nav id="site-navigation" class="main-navigation menu-right">existing code</nav>
</div>
You should then have something along the lines of what you want, though you may have to play with the CSS just a little to get the exact look you desire.
Depending on what you want, and how your menu is coded, you may also need:
.sitebranding {
position: absolute;
z-index: 1;
}
You will need some testing if your site is responsive.
I'm not happy with my code which uses a sprite image to show different images for each item in a list. The code can be seen here:
http://jsfiddle.net/spadez/JBuE6/45/
Before it was possible to click anywhere along the width of the column and it would select the list item because I used display: block.
However, because my sprite requires:
width: 0px;
It means I have to click on the actual list text in order to select it. Removing the width: 0px from the class .nav li achieves the affect I want. Can anyone show me how to do this, with some clean efficient code.
I'd take advantadge of CSS pseudo-elements, like ::before. You can do it in this way:
http://jsfiddle.net/franciscop/JBuE6/53/
HTML:
<nav>
<ul>
<li>
User
</li>
...
CSS:
nav a {
color: gray;
display: block;
line-height: 26x;
width: 100%;
}
nav li a::before {
display: inline-block;
content: "";
background:url('http://www.otlayi.com/web_images/content/free-doc-type-sprite-icons.jpg');
height: 20px;
width: 20px;
}
#user::before {
background-position: -10px -6px;
}
OLD ANSWER [alternative]:
I would change the padding left and the sprite to the <a>, so that you can click them also.
.nav li {
}
.nav li a {
color: gray;
display: block;
line-height: 26x;
padding-left: 30px;
background:url('http://www.otlayi.com/web_images/content/free-doc-type-sprite-icons.jpg');
height: 20px;
width: 0px;
}
http://jsfiddle.net/franciscop/JBuE6/50/
You should be putting your images on the links, not the list. Use display:block and padding-left: to provide enough room. In general, put all non-positional styling on the A-tag, not the LI.
Other than that, you are doing it the right way.