Ok hey guys.
So what I try to acheive is to have a menu in the topnav of my site and when hovring the mouse over to show some stuff in a list under it.
so far I'm working on local on a test html file until I get it working.
so what i got so far is this menu:
<ul id="menu">
<li>Notifications
<ul>
<li id="foot-notify-954>
Xtesting left a comment for your blog 22 hours ago
</li>
<li id="foot-notify-953>
X
<p>testing left a comment for your blog <span>22 hours ago</span></p>
</li>
</ul>
</li>
and my css code:
ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
ul li {
display: block;
position: relative;
float: left;
}
li ul { display: none }
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #2C5463;
margin-left: 1px;
white-space: nowrap;
}
ul li a:hover { background: #617F8A }
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
font-size: 11px;
}
li:hover a { background: #617F8A }
li:hover li a:hover { background: #95A9B1 }
I think the problem is that I'm having more than 1 <a> hyperlink inside the notifications <li>
id like each li notification to show in 1 line, as in the format, the X button at the start to remove it then the notification itself.
First, you have to check the html syntax:
list should looks like this:
<ul>
<li>Coffee</li>
<li>Tea</li>
<li><a href='#'>Milk</a></li>
</ul>
This tool helps you find the errors (red highlighted):
http://jsbin.com/emowir/1/edit
Here is your example:
<ul id="menu">
<!-- type 1: NOT drop down-->
<li>Home</li>
<!--type 2: drop down-->
<li>About Us
<ul>
<li>The Team</li>
<li>History</li>
<li>Vision</li>
</ul>
</li>
</ul>
What would you like to insert and where?
Your problem does seem to be bad code formatting. This is a clean and edited version of your code. The code "breaking" is an issue of CSS formatting. Using inline-blocks instead of blocks helps get things lined up properly, and shifting the background style to the <li> rather than the <a> makes it look better.
Your problem is the following:
ul li a {
display: block;
This makes every link you insert into the list a block. Try start to float things like in this example I made from your code, http://jsfiddle.net/xN8sc/1/
Related
I have just started learning about web development and I'm having some issues. In the website that I am currently creating I have a navigation menu. However, I also have other ul and li elements throughout the main content of the web page. I have been trying to get certain styles to apply to just my navigation bar and not the bulleted lists in my content but no matter what I try, I either get the styles on both my navigation and the content or on none. I have looked on google and a lot of different websites, I have tried having the .navigation and # in front of my styles but nothing seems to be working. I must be doing something wrong somewhere but I have no idea what it could be. If someone could help that'll be wonderful! The following is my navigation barcode:
<div id=navbar">
<ul>
<li>
Home
</li>
<li>
About Volleyball
</li>
<li>
Sign-Up
</li>
<li>
Announcements
</li>
<li>
Contact Us
</li>
<li>
Links
</li>
</ul>
</div>
and these are the styles on my separate css style sheet that I wish to apply to just the above code:
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #4da6ff;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 75px;
text-decoration: none;
}
li a:hover {
background-color: #80bfff;
}
You can simply select only elements which are children of you navbar by prepending your selectors with #navbar which selects the element with the id navbar and the selectors after that will only search in its children:
#navbar ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #4da6ff;
}
#navbar li {
float: left;
}
#navbar li a {
display: block;
color: white;
text-align: center;
padding: 14px 75px;
text-decoration: none;
}
#navbar li a:hover {
background-color: #80bfff;
}
<div id="navbar">
<ul>
<li>Home</li>
<li>About Volleyball</li>
<li>Sign-Up</li>
<li>Announcements</li>
<li>Contact Us</li>
<li>Links</li>
</ul>
</div>
<ul>
<li>No styles applied</li>
<li>No styles applied</li>
</ul>
In your .css file you can create classes to use across elements.
Try this in the .css file.
.hello {
color: blue;
text-align: center;
}
Then try this in your html
<h1 class="hello">Hello World</h1>
This will apply the style defined in the .css file to the element with the class "hello".
More information about classes can be found here: https://www.w3schools.com/cssref/sel_class.asp
If you want to add style to any specific element then you can add CSS code to that specific element like: for tag you can use p{color:red} OR by using class: p.my-element{color:red} or using ID: p#{color red}
You are in your initial phase of learning development. So read and write your own code.
Look into id's and classes.
This will allow you to style elements seperately.
I have built this Vertical Menu with hidden submenus however I cannot get the submenu to display when the user hovers. How could I go about doing this? Also how can I get the text to be formatted all the way left, since they are lists I can get rid of the bullets, however I cannot get the text to go where the bullets used to be. Also, I am wondering what the best way would be to set the width of the "main-nav". I don't want anything to be over the text except the logo. The body of the site would be next to the navigation. I want the side of the logo to also line up with the left side of the text, and I cannot figure out how to do this. The red border is just for testing purposes (obviously).
Here is the link to my codepen.
[BONUS] I am trying to create my own site from scratch with wordpress and a custom theme. How does one create it so that the logo image is taken from the site identity tab in the customize sidebar? And also just display text if no logo is chosen in the identity bar. Would it be some wordpress php function? Also, I would want the logo to be apart of the main-navigation by default. I have the register_nav_menu() function in my functions.php file and it assigns a menu to Main Navigation, also giving it a class main-navigation. How could I get the logo to by default appear above this menu? Any tips on this would be greatly appreciated. (Wordpress/coding noob here)
HTML:
<div id="container">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/2000px-Google_2015_logo.svg.png" class="logo-branding" />
<nav id="site-navigation" class="main-navigation">
<ul>
<li class="active">Overview</li>
<li>About</li>
<li>Submenu</li>
<ul class="sub-menu">
<li>Item 1</li>
<li>Item 2</li>
</ul>
<li>Contact</li>
</ul>
</nav>
CSS:
.main-navigation {
bottom: 2%;
margin-left: 4%;
display: block;
float: left;
border: 1px solid red;
position: fixed;
overflow: hidden;
width: 15%;
}
.main-navigation li, .main-navigation a {
list-style-type: none;
text-align: left;
text-decoration: none;
color: black;
text-transform: lowercase;
font: 16pt helvetica, sans serif;
padding: 1%;
}
.main-navigation a:hover, .main-navigation .active {
color: tan !important;
font-weight: bold !important;
}
.main-navigation .sub-menu {
display: none;
}
.main-navigation .sub-menu:hover {
display: block;
}
#container {
height: 10000px;
}
.logo-branding {
display: block;
position: fixed;
margin-top: 8%;
transform: rotate(90deg);
width: 15%;
}
JS:
/* No JS */
I believe that this is your desired behaviour?
To do this, you need to place your ul submenu inside the li for the menu item that is displayed. This is the only change I made to the HTML.
You can then add a CSS rule so that when you hover over the li, its ul child becomes visible. i.e: .main-navigation li:hover {display: block; }.
The reason it didn't work when you did .main-navigation .sub-menu:hover is because when it is not being displayed, you cannot hover over it, so the hover state is never triggered. In the rule which I added, it is triggered when you hover over the containing li.
.main-navigation {
bottom: 2%;
margin-left: 4%;
display: block;
float: left;
border: 1px solid red;
position: fixed;
overflow: hidden;
width: 15%;
}
.main-navigation li,
.main-navigation a {
list-style-type: none;
text-align: left;
text-decoration: none;
color: black;
text-transform: lowercase;
font: 16pt helvetica, sans serif;
padding: 1%;
}
.main-navigation a:hover,
.main-navigation .active {
color: tan !important;
font-weight: bold !important;
}
.main-navigation .sub-menu {
display: none;
}
.main-navigation li:hover ul {
display: block;
}
#container {
height: 10000px;
}
.logo-branding {
display: block;
position: fixed;
margin-top: 8%;
transform: rotate(90deg);
width: 15%;
}
<div id="container">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/2000px-Google_2015_logo.svg.png" class="logo-branding" />
<nav id="site-navigation" class="main-navigation">
<ul>
<li class="active">Overview
</li>
<li>About
</li>
<li>Submenu v
<ul class="sub-menu">
<li>Item 1
</li>
<li>Item 2
</li>
</ul>
</li>
<li>Contact
</li>
</ul>
</nav>
EDIT: I may have made a mistake regarding WordPress, so I deleted that part of the answer so that I do not mislead anyone. E. Shio, however, found a link which explains it almost step by step. I'll summarise what this link says, just in case it someday gets deleted or the page url gets moved.
First, you check if there is a custom logo, for which you use has_custom_logo (). You then output that custom logo with the_custom_logo(). This is a relatively new feature to Wordpress though, so to maintain backwards compatibility, you should check if the function exists with function_exists( 'the_custom_logo' ). If there was no custom logo, you can output the text to display inside an else statement. Here's an example:
if( function_exists('the_custom_logo') ) {
if( has_custom_logo() ) {
the_custom_logo();
} else {
$blogname = get_bloginfo('name');
echo "<h1>$blogname</h1>";
}
}
If you have any questions about the CSS for the menu, I'm more than happy to help! (I'm no expert in Wordpress though, so I probably can't help with any Wordpress specific things, but I can try! XP)
I got a problem with the CSS hover-event.
I created a page with a navigation bar at the top. For compatibility reasons I had to move away from nav and changed it to a simple div. (nav is not known in IE8, but it still has to be working there.)
<div class="nav">
<ul>
<li> <a> Something </a>
<ul>
....
</ul>
</li>
....
</ul>
</div>
That resulted in making the hover on my navigation bar not working anymore. But it's not, that nothing is working, only the first one of the following lines does not do it's job anymore. The background simply does not change.
.nav ul li:hover { background: #BFBFBF; } - not working
.nav ul li:hover > a { color:#FFFFFF; } - working perfectly fine
.nav ul li:hover > ul { display:block; } - working perfect as well
.nav ul {
background: #404040;
list-style:none;
padding:0 20px;
margin: 0;
height: 30px;
text-align:left;
display:block;
}
I double checked basically everything I know, suspected or found, that could be the source of my issue, but I was yet unable to get it back working.
I tried using background-color instead of background, without success.
I want to do it without having to use anything besides HTML and CSS, which should be possible, since it worked, when I still was using the nav-element.
I am noob to css, maybe I'm missing some really simple detail.
Thanks in advance.
Rather than modifying the nav bar content, just try to change the animation for the thing which you are pointing at, I mean that rather than hovering the <li> component just make the text in it hovering
.nav a {
text-decoration: none;
color: #fff;
display: block;
padding-left: 15px;
border-bottom: 1px solid #888;
transition: .2s background-color;
}
.nav a:hover {
background-color: #005f5f;
}
.nav a.active {
background-color: #aaa;
color: #444;
cursor: default;
}
Try defining the <a> element and hovering it as the whole <li> won't hover with multiple overlapping CSS formats
See I created something in html. And your code is working.
Its good if you can paste your html
<head runat="server">
<title></title>
<style type="text/css">
.nav ul li:hover {
background: #BFBFBF;
}
.nav ul li:hover > a {
color: #FFFFFF;
}
.nav ul li:hover > ul {
display: block;
}
</style>
<nav class="nav">
<ul>
<li>
<a>Li 1</a>
</li>
<li>
<ul>
<li>Li 2
</li>
</ul>
</li>
<li>Li 3
</li>
</ul>
</nav>
Basically I've made a really nice navbar and all, however the dropdown I made isnt working, it shows on hover over my Community tab, but dissappears when i try and hover onto it :(
Does anyone know how i can fix it?
Here is my code:
<div class="navigation">
<ul class="navigation_items">
<li class="active">Home</li>
<li>What we do</li>
<li>
<a>Community</a>
<ul>
<li><a>Forums</a></li>
</ul>
</li>
<li>Contact</li>
</ul>
</div>
Check the css code in the jsfiddle
http://jsfiddle.net/8a92u/
Push the sub menu bit over the main li so it retains the menu on hover.
Add margin-top:-10px to sub menu ul and padding-top: 10px to get it back to the same UI out look.
.navigation_items ul {
background-color: rgb(28, 28, 28);
border-radius: 0px;
padding: 0;
position: absolute;
top: 100%;
margin-top: -10px;
padding-top: 10px;
}
DEMO
Use this:
.navigation_items li:hover > ul,
.navigation_items li > ul:hover {
display: block;
margin-top: -10px;
}
instead of this:
.navigation_items li:hover > ul {
display: block;
}
.navigation_items ul {
display: none;
margin-top: -10px;
}
I am doing a website for school, and it's been going well. The only problem I am stuck on is this: The navbar changes size on different sized screens. It's most readily apparent when zooming out, but it is slightly off on different screens.
Here is a screenshot of what I mean:
https://docs.google.com/a/g.ccsd.net/file/d/0B_Sda_-LouAKbnVKVHhMSW5yeXc/edit?usp=sharing
Please note that the left side, which is the problem, moves around a lot depending on the scale. The above image is only one example.
This is my CSS:
ul {
font-family: 'Open Sans', Times;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
position: relative;
float: right;
z-index: 150;
/* min-width: 739px;
max-width: 739px; */
}
ul li {
display: block;
position: relative;
float: right;
}
li ul { display: none; }
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 7px solid #CC4D4D;
padding: 25px 26.45px 30px 26.45px; /*top right bottom left*/
background: #333333;
margin-left: 0px;
white-space: nowrap;
}
ul li a:hover { background: #757575; }
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
font-size: 11px;
}
li:hover a { background: #757575; }
li:hover li a:hover { background: #757575; }
This is my HTML:
<ul id="menu">
<li>Showcase</li>
<li>Contact</li>
<li>FAQ</li>
<li>Faculty
<ul>
<li>Mrs. Rosarita Olvina</li>
<li>Mrs. Christine Pavesich</li>
<li>Mr. Francisco Virella</li>
<li>Mrs. Susan Williams</li>
</ul>
</li>
<li>Program Areas
<ul>
<li>Graphic Design</li>
<li>Photography</li>
<li>Video Production</li>
<li>Animation</li>
<li>Art</li>
</ul>
</li>
<li>About
<ul>
<li>What We Do</li>
<li>Where We Go</li>
</ul>
</li>
<li>Home</li>
</ul>
Thank you for any help.
***I tried first answer, it didn't work, but I may be doing it very wrong.
The problem is not necessarily within the menu. Rather the whole menu (or its container) needs to be placed properly.
As far as I can tell from the code you've given, the floats may also play a part in fixing this. The whole menu and nested ULs are floating. My suggestion would be to avoid these floats and work with "display: inline-block" instead to get the horizontal arrangement.
After streamlining the menu entries like that, you can properly position your whole menu container in the surrounding HTML.
In case you don't already use it: Firebug or Chromebug plugins are really handy for identifying errors like this.