I am very new to javascript, so I apologize in advance if I waste anyone's time with a problem that may have a "duh" answer :-)
I am creating a navigation bar for a webpage. It starts off as an unordered list, and I am styling it to float the list items horizontally across the page. That part works fine for me.
I started to work at incorporating an unordered list as a submenu of one of my original list items. When I hover the mouse over the main list item, the submenu items appear, and when I mouse out, the submenu items disappear. The problem is that when the submenu items appear, they display on top of the navigation link to the left, instead of breaking out and dropping down below the link that I am hovering over. I tried setting the position to relative, but then it just shoved the submenu to the right.
I think the problem may be with my css. If I do not apply the external style sheet, then things seem to work better.
Here is my html:
<ul class="nav">
<li>Home</li>
<li>Department Members</li>
<ul id="menu" style="display:none;position:absolute">
<li>Brian Kendricks</li>
<li>Tim Jones</li>
<li>David Kline</li>
</ul>
<li>Systems Used</li>
<li>System Status</li>
<li>Projects</li>
</ul>
My css is:
.nav li {
float: left;
width: 20%;
font-family: verdana,arial,sans-serif;
text-align: center;
padding-top: 5px;
padding-bottom: 5px;
background-image:none;
background-color: #004E98;
display: block;
}
.nav a {
color: white;
}
.nav a:hover {
color: white;
}
.nav li:a:hover {
background-color: #093F6D;
}
And here is my javascript:
function drop(menu) {
document.getElementById(menu).style.display = 'block';
document.getElementById(menu).style.position = 'relative';
}
function hide(menu) {
document.getElementById(menu).style.display = 'none';
}
I would like to stick to using javascript, as the course that I am taking does not wish for me to incorporate things like JQuery at this time.
Thanks in advance for any assistance that you may offer in pointing me in the right direction.
Make your submenu a child of the <li> they are under - instead of currently you have it a child of the overall <ul>. Then you can give the parent item relative positioning, and the child list absolute positioning with top 100% (putting it under the parent item).
function drop(menu) {
document.getElementById(menu).style.display = 'block';
}
function hide(menu) {
document.getElementById(menu).style.display = 'none';
}
.nav li {
float: left;
width: 20%;
font-family: verdana,arial,sans-serif;
text-align: center;
padding-top: 5px;
padding-bottom: 5px;
background-image:none;
background-color: #004E98;
display: block;
position: relative;
}
.nav a {
color: white;
}
.nav a:hover {
color: white;
}
.nav li:a:hover {
background-color: #093F6D;
}
.dropmenu {
position: absolute;
top:100%;
left: 0;
}
.dropmenu li {
display: block;
float: left;
width:100%;
}
<ul class="nav">
<li>Home</li>
<li>Department Members
<ul id="menu" class="dropmenu" style="display:none">
<li>Brian Kendricks</li>
<li>Tim Jones</li>
<li>David Kline</li>
</ul>
</li>
<li>Systems Used</li>
<li>System Status</li>
<li>Projects</li>
</ul>
Related
I have my portfolio website in English and translated it in to German with a combination of JSON and Javascript. I have a dropdown menu to pick a language, and once a language is picked a javascript script switches the content of every indicated id with the content of the other language.
I also have a navigation menu which gets underlined when you hover over it and when you click it, it takes you to its respective area on the website. However, the moment the user switches the language, both of these functions do not work anymore i.e the href="#header# as well as nav ul li a:hover::after{} break.
You can mimic this behaviour at alexverheecke.com. Before selecting a language, you can hover over "Home", "About" and it will become underlined and upon clicking, will take you to the section. Once you switch language, this breaks.
I'm assuming this will be a bit time-consuming for someone to look at but I would appreciate any ideas that could help in fixing this.
const jsonDE = {
"_Home": "Startseite",
// ...
}
document.querySelector('#language').addEventListener("change", function() {
if (this.value == "๐ด๓ ง๓ ข๓ ฅ๓ ฎ๓ ง๓ ฟ ENG") {
for (let key in jsonEN) {
document.querySelector('#' + key).textContent = jsonEN[key]
}
else if (this.value == "๐ฉ๐ช DE") {
for (let key in jsonDE) {
document.querySelector('#' + key).textContent = jsonDE[key]
}
}
});
nav {
display: flex;
/* so image and links side-by-side */
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
nav ul li {
display: inline-block;
/* so horizontally aligned */
list-style: none;
margin: 10px 20px;
/* space between links */
}
nav ul li a {
color: white;
text-decoration: none;
font-size: 18px;
position: relative;
/* because abolute in :after */
}
nav ul li a::after {
content: '';
width: 0%;
height: 3px;
background: #3a65ed;
position: absolute;
left: 0;
bottom: -6px;
transition: 0.2s;
}
nav ul li a:hover::after {
width: 100%;
}
<nav>
<ul id="sidemenu">
<li id="_Home">Home </li>
<select id="language" class="language">
<option>๐ด๓ ง๓ ข๓ ฅ๓ ฎ๓ ง๓ ฟ ENG</option>
<option>๐ฉ๐ช DE</option>
</select>
</ul>
</nav>
If you check your site with the DOM inspector you can see that after you change language the a elements have been removed from within the li of your navigation bar.
I would assume this is because your JSON content holds HTML, yet you're updating the textContent of the element. Change textContent to innerHTML and try again.
Also note that you can simplify the language switching logic by putting the language code as a property within a single object of the JSON. Then you only need one loop to work with every language. Note the use of a value attribute on the option elements to avoid the need to have to cater for the subscript language codes which have been added to the text within the UI of the option.
Below is a working example with both of the above issues corrected:
// mock JSON object...
const translations = {
"DE": {
"_Home": "Startseite"
},
"EN": {
"_Home": "Home"
},
"IT": {
"_Home": "Casa"
}
}
// content switching logic
document.querySelector('#language').addEventListener("change", function() {
for (let key in translations[this.value]) {
document.querySelector('#' + key).innerHTML = translations[this.value][key]
}
});
nav {
display: flex;
/* so image and links side-by-side */
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
nav ul li {
display: inline-block;
/* so horizontally aligned */
list-style: none;
margin: 10px 20px;
/* space between links */
}
nav ul li a {
/* color: white; removed so white text is visible */
text-decoration: none;
font-size: 18px;
position: relative;
/* because abolute in :after */
}
nav ul li a::after {
content: '';
width: 0%;
height: 3px;
background: #3a65ed;
position: absolute;
left: 0;
bottom: -6px;
transition: 0.2s;
}
nav ul li a:hover::after {
width: 100%;
}
<nav>
<ul id="sidemenu">
<li id="_Home">Home </li>
</ul>
</nav>
<select id="language" class="language">
<option value="EN">๐ด๓ ง๓ ข๓ ฅ๓ ฎ๓ ง๓ ฟ ENG</option>
<option value="DE">๐ฉ๐ช DE</option>
<option value="IT">แดตแต IT</option>
</select>
We have the following html structure for our menu (see codepin). We would like to modify the menu without having to use JS on page load to move any elements around.
Here is what I tried, but cannot get the custom-dropdown to show like the screenshot below.
Here is my codepin that I have so far, but we are having hard time getting it to align in two columns like the screenshot. The goals below have been simplified, but should be applicable to other links like Category and Company as well since they follow similar structure.
Goal (see screenshot):
On hover of Testing 1, Collaboratively testing 1 and transition accurate should display
On hover of Collaboratively testing 1 then the Enthusiastically communicate cross-platform and Uniquely reconceptualize accurate should display
Screenshot:
Underline below Testing 1 is to simulate on hover effect
Grey background behind Collaboratively Testing is to indicate on hover effect, which results in goal #2 where they are display to the right.
Multi-Level Drop Down Menu with Pure CSS
ul {
list-style: none;
padding: 0;
margin: 0;
background: #1bc2a2;
}
ul li {
display: block;
position: relative;
float: left;
background: #1bc2a2;
}
/* This hides the dropdowns */
li ul { display: none; }
ul li a {
display: block;
padding: 1em;
text-decoration: none;
white-space: nowrap;
color: #fff;
border-bottom: 3px solid #1bc2a2
}
ul li a:hover {border-bottom: 3px solid #2c3e50}
/* Display the dropdown */
li:hover > ul {
display: block;
position: absolute;
}
li:hover li { float: none; }
li:hover a { background: #1bc2a2; }
li:hover li a:hover { background: #2c3e50; }
.main-navigation li ul li { border-top: 0; }
/* Displays second level dropdowns to the right of the first level dropdown */
ul ul ul {
left: 100%;
top: 0;
}
/* Simple clearfix */
ul:before,
ul:after {
content: " "; /* 1 */
display: table; /* 2 */
}
ul:after { clear: both; }
here comes your html code
<h1>Multi-Level Drop Down Menu with Pure CSS</h1>
<ul class="main-navigation">
<li>Home</li>
<li>Front End Design
<ul>
<li>HTML</li>
<li>CSS
<ul>
<li>Resets</li>
<li>Grids</li>
<li>Frameworks</li>
</ul>
</li>
<li>JavaScript
<ul>
<li>Ajax</li>
<li>jQuery</li>
</ul>
</li>
</ul>
</li>
</ul>
I am having a little difficult creating a navbar that when clicked it opens a small window on the same page like on the image.
Create the small window as it's own div:
<div id="myID"> This content will show when I click the navbar</div>
Add the following CSS:
#myID{
display: none;
}
Then use some script to show/hide the element:
$(document).ready(function(){
// change #nav to whatever the ID of the nav element is.
$('#nav').on('click', function(){
// show/hide pop up on click
$('#myID').toggle();
});
});
You can create a Navbar like this. This is the only dummy. In given image, they have one fix element and when you click on nav element according to that they are updating the content of that element.
$('#myNav').find('li a').click(function (e) {
$('li.active').removeClass('active');
$(this).parent('li').addClass('active');
$('#main').html($(this).html());
});
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #567;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #ccc;
}
.active {
background-color: #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="myNav">
<li class="active">Home</li>
<li>Service</li>
</ul>
<div id="main">
Home
</div>
It will help you to create a nav bar.
I've been going through problems in positioning navbar even after the fact that its responsive. Problem comes when zooming in and zooming out (except for Mozilla), and I got no choices than asking experts for a solution because I am a noob in coding.
Chrome zoom-out: https://s31.postimg.org/kjnbou0yj/zoom_out_chrome.png
Mozilla zoom-out (also perfect in zoom-in): https://s31.postimg.org/ud3lz1i3v/zoom_out_moz.png
Basically, I want to join my navbar with another div element so that it do not move from its position and I don't know how to use :target etc, and do not even know if target will solve my problem.
My need: I just need my navbar to stick to one size. With current settings, it is working PERFECTLY with MOZILLA ONLY. I don't know why it show blank space in chrome and other browsers when zoom-out and when zoom-in. Working fine with Chrome 100% zoom and working fine with Opera 100% zoom. The problem comes when zooming in or zooming out. Again, it is working perfectly for mozilla in zooming etc, no such problems with mozilla. And my navbar is responsive too.
My guess: I think that attaching this navbar with hidden div class could solve this problem. BUT I am a complete noob in coding and I can just guess.
Here is the code of my navbar:
ul.pnav {
position: relative;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
border: none;
list-style-type: none;
width: 900px;
height: 55px;
margin: auto;
top: 281px;
left: 0;
right: 0;
padding: 0;
overflow: hidden;
background-color: #767676;
z-index: 9999;
}
#-moz-document url-prefix() {
ul.pnav {
top: 286px
}
}
ul.pnav li {float: left;}
ul.pnav li a {
display: inline-block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 3s;
font-size: 17px;
font-family: Arial;
font-weight: bold;
}
ul.pnav li a:hover {background-color: #111;}
ul.pnav li.icon {display: none;}
#media screen and (max-width:680px) {
ul.pnav li:not(:first-child) {display: none;}
ul.pnav li.icon {
float: right;
display: inline-block;
}
}
#media screen and (max-width:680px) {
ul.pnav.responsive {position: relative;}
ul.pnav.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
ul.pnav.responsive li {
float: none;
display: inline;
}
ul.pnav.responsive li a {
display: block;
text-align: left;
}
}
I have this in html as a code:
<ul class="pnav">
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
<li class="icon">
โฐ
</li>
</ul>
This is div class to which I want to attach navbar.
<div class="fornavbar"></div>
I don't know how to proceed further, please help.
Look at this fiddle: https://jsfiddle.net/8qepe4gw/2/
In order for them to align together you just simply put them both inside of a common div like this (.container),
<div class="container">
<ul class="pnav">
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
<li class="icon">โฐ</li>
</ul>
<div class="fornavbar"></div>
</div>
And then you assign a width to the .container, and then you can give both the .pnav and .fornavbar a width of 100% so they stretch all the way out inside of the container, as in they have the same width.
Now the reason why it only worked in firefox is probably because of this part of the code:
#-moz-document url-prefix() {
ul.pnav {
top: 286px
}
}
Because #-moz-document only targets firefox.
It's still gonna work in all browsers now though with the new code I added in the fiddle so you shouldn't have to worry about it, perhaps even delete that part of the CSS code(?).
I have a webpage that uses jquery to display a submenu div while a user is hovering over an a:link in the main parent menu.
$('.menu ul li').hover(function() {
$(this).find('.dropnav').stop(true, true).fadeTo('fast', 1);
}, function() {
$(this).find('.dropnav').stop(true, true).fadeOut(800, 0);
});
The problem is, I want this webpage's navigation feature to be independent of javascript. So when users do not have javascript enabled, the menu will still display - just without the effects of scrolls or fades.
Thanks.
Use the :hover CSS pseudo-class.
.menu ul li:hover .dropnav {
opacity: 1;
/* display: block; ? */
}
Here is a pretty solid example of a CSS based menu. There is JavaScript that goes with it, if you are looking for backwards compatibility to IE6.
http://qrayg.com/learn/code/cssmenus/
HTML
<ul class="main-nav">
<li>main nav-1
</li>
<li>main nav-2
<ul class="sub-nav">
<li>sub-nav-2.1</li>
<li>sub-nav-2.2</li>
<li>sub-nav-2.3</li>
</ul>
</div>
</li>
<li>main nav-3
<li>main nav-4
</ul>
css
ul.main-nav > li { position: relative; display: block; float: left; margin: 0 15px;}
ul.main-nav > li > a {display: block; line-height: 40px; }
ul.sub-nav { display:none; position: absolute; top: 40px; left: 0; min-width: 200px;}
ul.main-nav > li:hover ul.sub-nav { display: block; z-index: 999; }
check this one for live demo http://jsfiddle.net/q9YZf/