Creating a child in a drop down navigation menu
Hi,
I have this template page http://kroweb.dk/gfdev/templates/gf_index_bare_sidebar.php
In the navigation bar at the top of the page I have a drop down menu at the right side of the munu. It all works nicely, but I would like to be able to add "children" to the content of the drop down.
In the code below - which shows the drop down content - I wold like to make the instance that I have indented a child of the one above it so that when hovering the one above the child appears to the right of it's parent.
If anybody have ideas to how this could be done, I am all ears :)
I have this template page http://kroweb.dk/gfdev/templates/gf_index_bare_sidebar.php
In the navigation bar at the top of the page I have a drop down menu at the right side of the munu. It all works nicely, but I would like to be able to add "children" to the content of the drop down.
In the code below - which shows the drop down content - I wold like to make the instance that I have indented a child of the one above it so that when hovering the one above the child appears to the right of it's parent.
If anybody have ideas to how this could be done, I am all ears :)
<div class="w3-dropdown-hover">
<button class="w3-button w3-hide-small w3-hover-text-light-grey w3-hover-dark-grey" style="color: #cccccc; forn-family: arial; font-size: 14px;">Arkivalier og værktøjer</button>
<div class="w3-dropdown-content w3-bar-block w3-black">
<a href="https://genealogiskforum.dk/arkivalier/canvas" class="w3-bar-item w3-button w3-hover-text-light-grey w3-hover-dark-grey" style="font-family: arial; font-size: 14px; color: #cccccc; font-weight: lighter; margin-left:10px; text-decoration: none;">Geografisk indgang</a>
<a href="https://genealogiskforum.dk/arkivalier/kirkeboeger_2" class="w3-bar-item w3-button w3-hover-text-light-grey w3-hover-dark-grey" style="font-family: arial; font-weight: normal; font-size: 14px; color: #cccccc; font-weight: lighter; margin-left:10px; text-decoration: none;">Kirkebøger</a>
<a href="https://genealogiskforum.dk/arkivalier/folketaellinger" class="w3-bar-item w3-button w3-hover-text-light-grey w3-hover-dark-grey" style="font-family: arial; font-weight: normal; font-size: 14px; color: #cccccc; font-weight: lighter; margin-left:10px; text-decoration: none;">Folketællinger</a>
<a href="https://genealogiskforum.dk/arkivalier/ft/ft_light/" class="w3-bar-item w3-button w3-hover-text-light-grey w3-hover-dark-grey" style="font-family: arial; font-weight: normal; font-size: 14px; color: #cccccc; font-weight: lighter; margin-left:10px; text-decoration: none; display: block">Folketællinger light</a>
<a href="http://genealogiskforum.dk/arkivalier/stednavne" class="w3-bar-item w3-button w3-hover-text-light-grey w3-hover-dark-grey" style="font-family: arial; font-weight: normal; font-size: 14px; color: #cccccc; font-weight: lighter; margin-left:10px; text-decoration: none;" target= "_blank">Stednavne</a>
<a href="https://genealogiskforum.dk/arkivalier/skifter_staden" class="w3-bar-item w3-button w3-hover-text-light-grey w3-hover-dark-grey" style="font-family: arial; font-weight: normal; font-size: 14px; color: #cccccc; font-weight: lighter; margin-left:10px; text-decoration: none;">Skifter Staden</a>
<a href="https://genealogiskforum.dk/arkivalier/kancelli" class="w3-bar-item w3-button w3-hover-text-light-grey w3-hover-dark-grey" style="font-family: arial; font-weight: normal; font-size: 14px; color: #cccccc; font-weight: lighter; margin-left:10px; text-decoration: none;">Kancelli m.m.m.</a>
<a href="https://genealogiskforum.dk/arkivalier/allearkivalier" class="w3-bar-item w3-button w3-hover-text-light-grey w3-hover-dark-grey" style="font-family: arial; font-weight: normal; font-size: 14px; color: #cccccc; font-weight: lighter; margin-left:10px; text-decoration: none;" target= "_blank">Alle arkivalier</a>
<a href="http://genealogiskforum.dk/laegdsruller.php" class="w3-bar-item w3-button w3-hover-text-light-grey w3-hover-dark-grey" style="font-family: arial; font-weight: normal; font-size: 14px; color: #cccccc; font-weight: lighter; margin-left:10px; text-decoration: none;" target= "_blank">Lægdsruller</a>
<a href="http://geltzer.dk/kirkeaaret.php" class="w3-bar-item w3-button w3-hover-text-light-grey w3-hover-dark-grey" style="font-family: arial; font-weight: normal; font-size: 14px; color: #cccccc; font-weight: lighter; margin-left:10px; text-decoration: none;" target= "_blank">Kirke kalender</a>
<a href="http://genealogiskforum.dk/arkivalier/tools" class="w3-bar-item w3-button w3-hover-text-light-grey w3-hover-dark-grey" style="font-family: arial; font-weight: normal; font-size: 14px; color: #cccccc; font-weight: lighter; margin-left:10px; text-decoration: none;">Nyttige links</a>
<a href="http://genealogiskforum.dk/arkivalier/herredsbyfogeder" class="w3-bar-item w3-button w3-hover-text-light-grey w3-hover-dark-grey" style="font-family: arial; font-weight: normal; font-size: 14px; color: #cccccc; font-weight: lighter; margin-left:10px; text-decoration: none;">Herreds- og Byfogeder</a>
<a href="https://genealogiskforum.dk/arkivalier" class="w3-bar-item w3-button w3-hover-text-light-grey w3-hover-dark-grey" style="font-family: arial; font-weight: normal; font-size: 14px; color: #cccccc; font-weight: lighter; margin-left:10px; text-decoration: none;">Om Arkivalier</a>
</div>
</div>
Last Comment
ASKER
Not quite.
I would like these "children" to be default hidden, and only to be shown when hovering their parents :)
I would like these "children" to be default hidden, and only to be shown when hovering their parents :)
OK. Fair Enough. Haven't really got time at the moment to go into it in detail, but you're going to need to restructure your HTML, probably by setting up all your navigation inside <ul> and <li> elements.
<ul id="navigation">
<li>Nav 1</li>
<li>Nav 2</li>
<li>Nav 3
<ul>
<li>Child 3a</li>
<li>Child 3b</li>
<li>Child 3c
<ul>
<li>Sub Item 3c x
</ul>
</li>
<li>Child 3d</li>
</ul>
</li>
<li>Nav 4</li>
</ul>
This will give you the hierachy you need, and then it's just a case of styling it using CSS - positioning, display: block/none, :hover etc.
<ul id="navigation">
<li>Nav 1</li>
<li>Nav 2</li>
<li>Nav 3
<ul>
<li>Child 3a</li>
<li>Child 3b</li>
<li>Child 3c
<ul>
<li>Sub Item 3c x
</ul>
</li>
<li>Child 3d</li>
</ul>
</li>
<li>Nav 4</li>
</ul>
This will give you the hierachy you need, and then it's just a case of styling it using CSS - positioning, display: block/none, :hover etc.
ASKER
OK. Thanks. I'll keep working on that :)
Usual practice for this is to create your navigation as a nested list of items and then use CSS to show and hide the sub-menus.
Do you means something like this
Do you means something like this
<!doctype html>
<html>
<head>
<style type="text/css">
ul {
margin: 0;
padding: 0;
list-style: none;
color: #fff !important;
background-color: #000 !important;
}
ul.main-nav {
width: 50%;
margin: 0 auto;
}
ul.main-nav ul {
display: none;
}
ul.main-nav > li {
position: relative;
display: inline-block;
}
ul.main-nav a {
display: inline-block;
font-family: arial;
font-weight: normal;
font-size: 14px;
color: #cccccc;
font-weight: lighter;
margin-left:10px;
text-decoration: none;
white-space: nowrap;
padding: 10px 16px;
}
ul.main-nav > li > ul {
position: absolute;
}
ul.main-nav li:hover > ul {
display: block;
}
ul.main-nav ul ul {
margin-left: 15px;
padding-left: 15px;
}
nav {
font-family: sans-serif;
font-size: 0.8rem;
font-weight: lighter;
padding-top: 8px;
border-top: 1px solid #cccccc;
background-color: #000 !important;
padding: 10px 0;
}
</style>
</head>
<body>
<nav>
<ul class="main-nav">
<li><a href="https://genealogiskforum.dk" class="w3-bar-item w3-button w3-hide-small w3-hover-text-light-grey w3-hover-dark-grey" >Velkommen</a></li>
<li><a href="https://genealogiskforum.dk/slaegtstrae" class="w3-bar-item w3-button w3-hide-small w3-hover-text-light-grey w3-hover-dark-grey" >Slægtstræ</a></li>
<li><a href="https://genealogiskforum.dk/Gf_Magasin" class="w3-bar-item w3-button w3-hide-small w3-hover-text-light-grey w3-hover-dark-grey" >Gf magasin</a></li>
<li><a href="https://genealogiskforum.dk/gravsten_pk" class="w3-bar-item w3-button w3-hide-small w3-hover-text-light-grey w3-hover-dark-grey" >Gravsten</a></li>
<li><a>Arkivalier og værktøjer</a>
<ul>
<li><a href="https://genealogiskforum.dk/arkivalier/canvas" class="w3-bar-item w3-button w3-hover-text-light-grey w3-hover-dark-grey" style="font-family: arial; font-size: 14px; color: #cccccc; font-weight: lighter; margin-left:10px; text-decoration: none;">Geografisk indgang</a></li>
<li><a href="https://genealogiskforum.dk/arkivalier/kirkeboeger_2" class="w3-bar-item w3-button w3-hover-text-light-grey w3-hover-dark-grey" >Kirkebøger</a></li>
<li><a href="https://genealogiskforum.dk/arkivalier/folketaellinger" class="w3-bar-item w3-button w3-hover-text-light-grey w3-hover-dark-grey" >Folketællinger</a>
<ul>
<li><a href="https://genealogiskforum.dk/arkivalier/ft/ft_light/" class="w3-bar-item w3-button w3-hover-text-light-grey w3-hover-dark-grey" style="font-family: arial; font-weight: normal; font-size: 14px; color: #cccccc; font-weight: lighter; margin-left:10px; text-decoration: none; display: block">Folketællinger light</a></li>
</ul>
</li>
<li><a href="http://genealogiskforum.dk/arkivalier/stednavne" class="w3-bar-item w3-button w3-hover-text-light-grey w3-hover-dark-grey" target="_blank">Stednavne</a> </li>
<li><a href="https://genealogiskforum.dk/arkivalier/skifter_staden" class="w3-bar-item w3-button w3-hover-text-light-grey w3-hover-dark-grey" >Skifter Staden</a></li>
<li><a href="https://genealogiskforum.dk/arkivalier/kancelli" class="w3-bar-item w3-button w3-hover-text-light-grey w3-hover-dark-grey" >Kancelli m.m.m.</a> </li>
<li><a href="https://genealogiskforum.dk/arkivalier/allearkivalier" class="w3-bar-item w3-button w3-hover-text-light-grey w3-hover-dark-grey" target="_blank">Alle arkivalier</a></li><li><a href="http://genealogiskforum.dk/laegdsruller.php" class="w3-bar-item w3-button w3-hover-text-light-grey w3-hover-dark-grey" target="_blank">Lægdsruller</a></li><li><a href="http://geltzer.dk/kirkeaaret.php" class="w3-bar-item w3-button w3-hover-text-light-grey w3-hover-dark-grey" target="_blank">Kirke kalender</a></li><li><a href="http://genealogiskforum.dk/arkivalier/tools" class="w3-bar-item w3-button w3-hover-text-light-grey w3-hover-dark-grey" >Nyttige links</a></li><li><a href="http://genealogiskforum.dk/arkivalier/herredsbyfogeder" class="w3-bar-item w3-button w3-hover-text-light-grey w3-hover-dark-grey" >Herreds- og Byfogeder</a> </li><li><a href="https://genealogiskforum.dk/arkivalier" class="w3-bar-item w3-button w3-hover-text-light-grey w3-hover-dark-grey" >Om Arkivalier</a></li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
ASKER
Thanks Julian,
Yes - we are getting closer :)
But I would really like if it was possible to display the "child" beside the parent - something like this:
This comes from Rapid Waever which is a web-dseign tool that I am trying get more independant of :)
Yes - we are getting closer :)
But I would really like if it was possible to display the "child" beside the parent - something like this:
This comes from Rapid Waever which is a web-dseign tool that I am trying get more independant of :)
ASKER
I have made this on the basis of your code. Only thing missing is that the "child" is shown besides the parent in stead of below.
http://kroweb.dk/gfdev/templates/julian.php
http://kroweb.dk/gfdev/templates/julian.php
Fairly simple change
<!doctype html>
<html>
<head>
<style type="text/css">
ul {
margin: 0;
padding: 0;
list-style: none;
color: #fff !important;
background-color: #000 !important;
}
ul.main-nav {
width: 50%;
margin: 0 auto;
}
ul.main-nav ul {
display: none;
}
ul.main-nav > li {
position: relative;
display: inline-block;
}
ul.main-nav a {
display: inline-block;
font-family: arial;
font-weight: normal;
font-size: 14px;
color: #cccccc;
font-weight: lighter;
margin-left:10px;
text-decoration: none;
white-space: nowrap;
padding: 10px 16px;
}
ul.main-nav > li > ul {
position: absolute;
}
ul.main-nav li:hover > ul {
display: block;
}
ul.main-nav ul li {
position: relative;
}
ul.main-nav ul ul {
position: absolute;
top: 0;
left: 100%;
}
nav {
font-family: sans-serif;
font-size: 0.8rem;
font-weight: lighter;
padding-top: 8px;
border-top: 1px solid #cccccc;
background-color: #000 !important;
padding: 10px 0;
}
</style>
</head>
<body>
<nav>
<ul class="main-nav">
<li><a href="https://genealogiskforum.dk" class="w3-bar-item w3-button w3-hide-small w3-hover-text-light-grey w3-hover-dark-grey" >Velkommen</a></li>
<li><a href="https://genealogiskforum.dk/slaegtstrae" class="w3-bar-item w3-button w3-hide-small w3-hover-text-light-grey w3-hover-dark-grey" >Slægtstræ</a></li>
<li><a href="https://genealogiskforum.dk/Gf_Magasin" class="w3-bar-item w3-button w3-hide-small w3-hover-text-light-grey w3-hover-dark-grey" >Gf magasin</a></li>
<li><a href="https://genealogiskforum.dk/gravsten_pk" class="w3-bar-item w3-button w3-hide-small w3-hover-text-light-grey w3-hover-dark-grey" >Gravsten</a></li>
<li><a>Arkivalier og værktøjer</a>
<ul>
<li><a href="https://genealogiskforum.dk/arkivalier/canvas" class="w3-bar-item w3-button w3-hover-text-light-grey w3-hover-dark-grey" style="font-family: arial; font-size: 14px; color: #cccccc; font-weight: lighter; margin-left:10px; text-decoration: none;">Geografisk indgang</a></li>
<li><a href="https://genealogiskforum.dk/arkivalier/kirkeboeger_2" class="w3-bar-item w3-button w3-hover-text-light-grey w3-hover-dark-grey" >Kirkebøger</a></li>
<li><a href="https://genealogiskforum.dk/arkivalier/folketaellinger" class="w3-bar-item w3-button w3-hover-text-light-grey w3-hover-dark-grey" >Folketællinger</a>
<ul>
<li><a href="https://genealogiskforum.dk/arkivalier/ft/ft_light/" class="w3-bar-item w3-button w3-hover-text-light-grey w3-hover-dark-grey" style="font-family: arial; font-weight: normal; font-size: 14px; color: #cccccc; font-weight: lighter; margin-left:10px; text-decoration: none; display: block">Folketællinger light</a></li>
</ul>
</li>
<li><a href="http://genealogiskforum.dk/arkivalier/stednavne" class="w3-bar-item w3-button w3-hover-text-light-grey w3-hover-dark-grey" target="_blank">Stednavne</a> </li>
<li><a href="https://genealogiskforum.dk/arkivalier/skifter_staden" class="w3-bar-item w3-button w3-hover-text-light-grey w3-hover-dark-grey" >Skifter Staden</a></li>
<li><a href="https://genealogiskforum.dk/arkivalier/kancelli" class="w3-bar-item w3-button w3-hover-text-light-grey w3-hover-dark-grey" >Kancelli m.m.m.</a> </li>
<li><a href="https://genealogiskforum.dk/arkivalier/allearkivalier" class="w3-bar-item w3-button w3-hover-text-light-grey w3-hover-dark-grey" target="_blank">Alle arkivalier</a></li><li><a href="http://genealogiskforum.dk/laegdsruller.php" class="w3-bar-item w3-button w3-hover-text-light-grey w3-hover-dark-grey" target="_blank">Lægdsruller</a></li><li><a href="http://geltzer.dk/kirkeaaret.php" class="w3-bar-item w3-button w3-hover-text-light-grey w3-hover-dark-grey" target="_blank">Kirke kalender</a></li><li><a href="http://genealogiskforum.dk/arkivalier/tools" class="w3-bar-item w3-button w3-hover-text-light-grey w3-hover-dark-grey" >Nyttige links</a></li><li><a href="http://genealogiskforum.dk/arkivalier/herredsbyfogeder" class="w3-bar-item w3-button w3-hover-text-light-grey w3-hover-dark-grey" >Herreds- og Byfogeder</a> </li><li><a href="https://genealogiskforum.dk/arkivalier" class="w3-bar-item w3-button w3-hover-text-light-grey w3-hover-dark-grey" >Om Arkivalier</a></li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
ASKER
That is super :) It works perfectly with the code below.
Ca I ask you just one more little thing.
When hovering over the drop down the hover background covers the text area only, and I would like it to cover the total area across the drop down box. Is that possible?
Ca I ask you just one more little thing.
When hovering over the drop down the hover background covers the text area only, and I would like it to cover the total area across the drop down box. Is that possible?
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
ul {
margin: 0;
padding: 0;
list-style: none;
color: #fff !important;
background-color: #000 !important;
}
ul.main-nav {
width: 50%;
margin: 0 auto;
}
ul.main-nav ul {
display: none;
}
ul.main-nav > li {
position: relative;
display: inline-block;
}
ul.main-nav a {
display: inline-block;
font-family: sans-serif;
font-weight: lighter;
font-size: 0.8rem;
line-height: 1rem;
color: #e6e6e6;
margin-left:10px;
text-decoration: none;
white-space: nowrap;
padding: 10px 16px;
}
ul.main-nav a:hover {
background-color: #4d4d4d;
}
ul.main-nav > li > ul {
position: absolute;
}
ul.main-nav li:hover > ul {
display: block;
}
ul.main-nav ul li {
position: relative;
}
ul.main-nav ul ul {
position: absolute;
top: 0;
left: 100%;
}
nav {
font-family: sans-serif;
font-size: 0.8rem;
font-weight: lighter;
padding-top: 8px;
border-top: 1px solid #cccccc;
background-color: #000 !important;
padding: 10px 0;
}
</style>
</head>
<body>
<nav>
<ul class="main-nav">
<li><a href="https://genealogiskforum.dk" >Velkommen</a></li>
<li><a href="https://genealogiskforum.dk/slaegtstrae" >Slægtstræ</a></li>
<li><a href="https://genealogiskforum.dk/Gf_Magasin" >Gf magasin</a></li>
<li><a href="https://genealogiskforum.dk/gravsten_pk" >Gravsten</a></li>
<li><a>Arkivalier og værktøjer</a>
<ul>
<li><a href="https://genealogiskforum.dk/arkivalier/canvas" >Geografisk indgang</a></li>
<li><a href="https://genealogiskforum.dk/arkivalier/kirkeboeger_2" >Kirkebøger</a></li>
<li><a href="https://genealogiskforum.dk/arkivalier/folketaellinger" >Folketællinger</a>
<ul>
<li><a href="https://genealogiskforum.dk/arkivalier/ft/ft_light/" >Folketællinger light</a></li>
</ul>
</li>
<li><a href="http://genealogiskforum.dk/arkivalier/stednavne" target="_blank">Stednavne</a></li>
<li><a href="https://genealogiskforum.dk/arkivalier/skifter_staden" >Skifter Staden</a></li>
<li><a href="https://genealogiskforum.dk/arkivalier/kancelli" >Kancelli m.m.m.</a> </li>
<li><a href="https://genealogiskforum.dk/arkivalier/allearkivalier" target="_blank">Alle arkivalier</a></li><li><a href="http://genealogiskforum.dk/laegdsruller.php" target="_blank">Lægdsruller</a></li><li><a href="http://geltzer.dk/kirkeaaret.php" target="_blank">Kirke kalender</a></li><li><a href="http://genealogiskforum.dk/arkivalier/tools" >Nyttige links</a></li><li><a href="http://genealogiskforum.dk/arkivalier/herredsbyfogeder" >Herreds- og Byfogeder</a> </li><li><a href="https://genealogiskforum.dk/arkivalier" >Om Arkivalier</a></li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
greetings Peter Kroman, , , I hope you can find something in my code to be of help to you. I looked at your code work for the
<div class="w3-bar w3-black w3-mobile" > black menu thing, and it looked like it was so full of unnecessary class declarations and a ton of unneeded style="" in all of the <a> links, So I did my version of this menu, and left out all unneeded class and style. I do not like to use the <ul> and <li> for this kind of menu, I like to use what the w3 uses for it's -
<div class="w3-dropdown-hover">
and not use the un-needed <li> because now you can just use style to make the <a> most any display type like block, the same as a <li>
works in firefox and chrome -
I placed two children on right hover pop-ups, just to show the use for the -
<div class="horzRight">
right pop child things
I really did not understand when you asked for -
"When hovering over the drop down the hover background covers the text area only, and I would like it to cover the total area across the drop down box."
but I changed the hover to make the background of all drop <a> a grey color, but it seems very odd to me, and I may not have under stood you.
please at least try this code and see if you understand what it's doing in the CSS
<div class="w3-bar w3-black w3-mobile" > black menu thing, and it looked like it was so full of unnecessary class declarations and a ton of unneeded style="" in all of the <a> links, So I did my version of this menu, and left out all unneeded class and style. I do not like to use the <ul> and <li> for this kind of menu, I like to use what the w3 uses for it's -
<div class="w3-dropdown-hover">
and not use the un-needed <li> because now you can just use style to make the <a> most any display type like block, the same as a <li>
works in firefox and chrome -
<style>
.horzMenu {
background: black;
text-align: center;
padding: 2px 0;
}
.horzMenu a{
display: inline-block;
text-decoration: none;
padding: 11px 11px;
font-family: arial;
font-weight: normal;
font-size: 14px;
color: #cccccc;
font-weight: lighter;
background: black;
}
.horzMenu a:hover {
background: #666;
}
.horzDropdown {
position: relative;
display: inline-block;
}
.horzDropdown button {
border: 0;
background: black;
display: inline-block;
cursor: s-resize;
padding: 11px 11px;
font-family: arial;
font-weight: normal;
font-size: 14px;
color: #cccccc;
font-weight: lighter;
}
.horzDrop4down button:hover {
background: #666;
}
.horzDropdown:hover > button {
background: #666;
}
.horzDropdown:hover > div {
display: block;
}
.horzDropdown:hover a {
background: #666;
}
.horzDrops {
position: absolute;
top: 100%;
left: 0px;
background: black;
z-index: 2;
display: none;
}
.horzDrops a{
display: block;
}
.horzRight {
position: relative;
}
.horzRight p{
margin: 0;
position: absolute;
left: 100%;
top: 0px;
display: none;
}
.horzRight:hover > p {
display: block;
width:10em;
}
.arowR, .arowD {
border: 6px solid transparent;
margin-top:2px;
margin-left:4px;
text-align:center;
display: inline-block;
}
.arowD {
border-bottom: none;
border-top-color: white;
}
.arowR {
margin-top:6px;
margin-left:7px;
margin-bottom: -2px;
border-right: none;
border-left-color: white;
}
</style>
<div class="horzMenu">
<a href="https://genealogiskforum.dk" >Velkommen</a>
<a href="https://genealogiskforum.dk/slaegtstrae">Slægtstræ</a>
<a href="https://genealogiskforum.dk/Gf_Magasin">Gf magasin</a>
<a href="https://genealogiskforum.dk/gravsten_pk">Gravsten</a>
<div class="horzDropdown">
<button>Arkivalier og værktøjer<i class="arowD"></i></button>
<div class="horzDrops">
<a href="https://genealogiskforum.dk/arkivalier/canvas" >Geografisk indgang</a>
<a href="https://genealogiskforum.dk/arkivalier/kirkeboeger_2">Kirkebøger</a>
<div class="horzRight">
<a href="https://genealogiskforum.dk/arkivalier/folketaellinger">Folketællinger<i class="arowR"></i></a>
<p><a href="https://genealogiskforum.dk/arkivalier/ft/ft_light/">Folketællinger light</a></p>
</div>
<a href="http://genealogiskforum.dk/arkivalier/stednavne" target= "_blank">Stednavne</a>
<a href="https://genealogiskforum.dk/arkivalier/skifter_staden">Skifter Staden</a>
<a href="https://genealogiskforum.dk/arkivalier/kancelli">Kancelli m.m.m.</a>
<a href="https://genealogiskforum.dk/arkivalier/allearkivalier" target= "_blank">Alle arkivalier</a>
<div class="horzRight">
<a href="http://genealogiskforum.dk/laegdsruller.php" target= "_blank">Lægdsruller<i class="arowR"></i></a>
<p><a href="https://genealogiskforum.dk/arkivalier/ft/ft_light/">Lægdsruller light</a></p>
</div>
<a href="http://geltzer.dk/kirkeaaret.php" target= "_blank">Kirke kalender</a>
<a href="http://genealogiskforum.dk/arkivalier/tools">Nyttige links</a>
<a href="http://genealogiskforum.dk/arkivalier/herredsbyfogeder">Herreds- og Byfogeder</a>
<a href="https://genealogiskforum.dk/arkivalier">Om Arkivalier</a>
</div>
</div>
</div>
I placed two children on right hover pop-ups, just to show the use for the -
<div class="horzRight">
right pop child things
I really did not understand when you asked for -
"When hovering over the drop down the hover background covers the text area only, and I would like it to cover the total area across the drop down box."
but I changed the hover to make the background of all drop <a> a grey color, but it seems very odd to me, and I may not have under stood you.
please at least try this code and see if you understand what it's doing in the CSS
ASKER
Thanks Slick812,
This look's very nice. Just a few things
What I meant by the "hovering over the drop down ... thing, was something like you can see in this example:
http://kroweb.dk/gfdev/templates/julian.php
I want the background of the drop down list to be the same color as the menu background (black), and I want the hover effect in the drop down to be the same as the hover effect color is in the rest of the menu (a shade of grey in this case).
I have tried to add that to your code, but i can't really get it working
This look's very nice. Just a few things
What I meant by the "hovering over the drop down ... thing, was something like you can see in this example:
http://kroweb.dk/gfdev/templates/julian.php
I want the background of the drop down list to be the same color as the menu background (black), and I want the hover effect in the drop down to be the same as the hover effect color is in the rest of the menu (a shade of grey in this case).
I have tried to add that to your code, but i can't really get it working
@Peter, again a small change.
Add height: 100% to the ul ul and remove the position relative on the ul li
Styles
Add height: 100% to the ul ul and remove the position relative on the ul li
Styles
<style type="text/css">
ul {
margin: 0;
padding: 0;
list-style: none;
color: #fff !important;
background-color: #000 !important;
}
ul.main-nav {
width: 50%;
margin: 0 auto;
}
ul.main-nav ul {
display: none;
}
ul.main-nav > li {
position: relative;
display: inline-block;
}
ul.main-nav a {
display: inline-block;
font-family: arial;
font-weight: normal;
font-size: 14px;
color: #cccccc;
font-weight: lighter;
margin-left:10px;
text-decoration: none;
white-space: nowrap;
padding: 10px 16px;
}
ul.main-nav > li > ul {
position: absolute;
}
ul.main-nav li:hover > ul {
display: block;
}
ul.main-nav ul ul {
position: absolute;
top: 0;
left: 100%;
height: 100%;
}
nav {
font-family: sans-serif;
font-size: 0.8rem;
font-weight: lighter;
padding-top: 8px;
border-top: 1px solid #cccccc;
background-color: #000 !important;
padding: 10px 0;
}
</style>
ASKER
Thanks Julian,
I'll look into this a little later to day (I am on my way out right now :) )
I have also sent you a personal EE message :)
I'll look into this a little later to day (I am on my way out right now :) )
I have also sent you a personal EE message :)
ASKER
@Slick812,
I like your setup, and I have worked quite a bit with your CSS. I am a little confused about all the background color statements that does not have any effect. If you can elaborate a little on why that is, I would be glad :)
Besides that there is only one thing I need to get fixed, and I believe I have tried whatever I could think of. But I can't fix it.
Take a look here: http://kroweb.dk/gfdev/templates/slick812.php and navigate down over the drop down list. You will see that the ENTIRE list take hover effect, and I need the hover effect to be limited per line in the drop down list, just as it works with the buttons.
If you can guide me to how we can fix that, I'll surely use your suggestion in my templates.
I paste in the full edited code here below.
I like your setup, and I have worked quite a bit with your CSS. I am a little confused about all the background color statements that does not have any effect. If you can elaborate a little on why that is, I would be glad :)
Besides that there is only one thing I need to get fixed, and I believe I have tried whatever I could think of. But I can't fix it.
Take a look here: http://kroweb.dk/gfdev/templates/slick812.php and navigate down over the drop down list. You will see that the ENTIRE list take hover effect, and I need the hover effect to be limited per line in the drop down list, just as it works with the buttons.
If you can guide me to how we can fix that, I'll surely use your suggestion in my templates.
I paste in the full edited code here below.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
.horzMenu {
background-color: black; /*background-color color to the menu block*/
text-align: center;
padding: 2px 0;
}
.horzMenu a{
display: inline-block;
text-decoration: none;
padding: 10px 16px;
font-family: sans-serif;
font-weight: lighter;
font-size: 0.8rem;
line-height: 1rem;
color: #e6e6e6;
white-space: nowrap;
background-color: black; /* bbackground-color color to horizontal menu buttons */
}
.horzMenu a:hover {
background-color: #4d4d4d; /* hover fcolor to horizontal menu buttons */
}
.horzDropdown {
position: relative;
display: inline-block;
background-color: white; /* no color effect */
}
.horzDropdown button {
border: 0;
background-color: black;
display: inline-block;
cursor: s-resize;
padding: 11px 11px;
font-family: arial;
font-weight: normal;
font-size: 14px;
color: #e6e6e6;
font-weight: lighter;
background-color: black; /*background-color color to the dropdown button */
}
.horzDropdown a:hover {
background-color: green; /* no color effect */
}
.horzDropdown button:hover {
background-color: red; /* no color effect */
}
.horzDropdown:hover > button {
background-color: #4d4d4d; /*hover color to dropdown button*/
}
.horzDropdown:hover > div {
display: block;
background-color: green; /* no color effect */
}
.horzDropdown:hover a {
background-color: black; /* backgrpund color to dropdown list*/
}
.horzDrops {
position: absolute;
top: 100%;
left: 0px;
background-color: white; /* no color effect */
z-index: 2;
display: none;
}
.horzDrops a {
display: block;
background-color: green; /* no color effect */
}
.horzDrops:hover a{
background-color: #4d4d4d; /* hover color to the ENITIRE deopdown list */
}
.horzRight {
position: relative;
}
.horzRight p{
margin: 0;
position: absolute;
left: 100%;
top: 0px;
display: none;
}
.horzRight:hover > p {
display: block;
width:10em;
}
.arowR, .arowD {
border: 6px solid transparent;
margin-top:2px;
margin-left:4px;
font-size: 10px;
display: inline-block;
}
.arowD {
border-bottom: none;
border-top-color: white;
}
.arowR {
margin-top:6px;
margin-left:8px;
margin-bottom: -2px;
border-right: none;
border-left-color: white;
}
</style>
</head>
<body>
<div class="horzMenu">
<a href="https://genealogiskforum.dk" >Velkommen</a>
<a href="https://genealogiskforum.dk/slaegtstrae">Slægtstræ</a>
<a href="https://genealogiskforum.dk/Gf_Magasin">Gf magasin</a>
<a href="https://genealogiskforum.dk/gravsten_pk">Gravsten</a>
<div class="horzDropdown">
<button>Arkivalier og værktøjer<i class="arowD"></i></button>
<div class="horzDrops">
<a href="https://genealogiskforum.dk/arkivalier/canvas" >Geografisk indgang</a>
<a href="https://genealogiskforum.dk/arkivalier/kirkeboeger_2">Kirkebøger</a>
<div class="horzRight">
<a href="https://genealogiskforum.dk/arkivalier/folketaellinger">Folketællinger<i class="arowR"></i></a>
<p><a href="https://genealogiskforum.dk/arkivalier/ft/ft_light/">Folketællinger light</a></p>
</div>
<a href="http://genealogiskforum.dk/arkivalier/stednavne" target= "_blank">Stednavne</a>
<a href="https://genealogiskforum.dk/arkivalier/skifter_staden">Skifter Staden</a>
<a href="https://genealogiskforum.dk/arkivalier/kancelli">Kancelli m.m.m.</a>
<a href="https://genealogiskforum.dk/arkivalier/allearkivalier" target= "_blank">Alle arkivalier</a>
<div class="horzRight">
<a href="http://genealogiskforum.dk/laegdsruller.php" target= "_blank">Lægdsruller<i class="arowR"></i></a>
<p><a href="https://genealogiskforum.dk/arkivalier/ft/ft_light/">Lægdsruller light</a></p>
</div>
<a href="http://geltzer.dk/kirkeaaret.php" target= "_blank">Kirke kalender</a>
<a href="http://genealogiskforum.dk/arkivalier/tools">Nyttige links</a>
<a href="http://genealogiskforum.dk/arkivalier/herredsbyfogeder">Herreds- og Byfogeder</a>
<a href="https://genealogiskforum.dk/arkivalier">Om Arkivalier</a>
</div>
</div>
</div>
</body>
</html>
@Peter,
Did you take a look at my latest sample?
Did you take a look at my latest sample?
ASKER
Yep - and I am working with that too. I am getting back about that :)
Just checking if my interpretation of your requirement re the background colour of the sub-sub-menu was correct?
ASKER
Tak a look here: http://kroweb.dk/gfdev/templates/julian.php
This is appr, what I need (full code below)
What I would like to add, is that when hovering down over the drop down list, so it should be the whole with of the entry that takes the hover effect, and not just the text part of it.
Second thing is, that it would be very nice if we could add a down arrow to the right of the drop down button in the bottom, and some small right arrows to the right of the text in the drop down list where the sub-sub menu(s) are.
But I have one problem. I have had to "hard code" the positioning of the sub-sub in the code below to get it shown right. But this will be a problem when I need to update the drop down list. Is there a way we can force it to display exactly to the right of its parent?
This is appr, what I need (full code below)
What I would like to add, is that when hovering down over the drop down list, so it should be the whole with of the entry that takes the hover effect, and not just the text part of it.
Second thing is, that it would be very nice if we could add a down arrow to the right of the drop down button in the bottom, and some small right arrows to the right of the text in the drop down list where the sub-sub menu(s) are.
But I have one problem. I have had to "hard code" the positioning of the sub-sub in the code below to get it shown right. But this will be a problem when I need to update the drop down list. Is there a way we can force it to display exactly to the right of its parent?
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
ul {
margin: 0;
padding: 0;
list-style: none;
color: #fff !important;
background-color: #000 !important;
}
ul.main-nav {
width: 50%;
margin: 0 auto;
}
ul.main-nav ul {
display: none;
}
ul.main-nav > li {
position: relative;
display: inline-block;
}
ul.main-nav a {
display: inline-block;
font-family: sans-serif;
font-weight: lighter;
font-size: 0.8rem;
line-height: 1rem;
color: #e6e6e6;
margin-left:10px;
text-decoration: none;
white-space: nowrap;
padding: 10px 16px;
}
ul.main-nav a:hover {
background-color: #4d4d4d;
}
ul.main-nav > li > ul {
position: absolute;
}
ul.main-nav li:hover > ul {
display: block;
}
/*ul.main-nav ul li {
position: relative;
}*/
ul.main-nav ul ul {
position: absolute;
left: 100%;
height: inherit;
top: 18%;
}
nav {
font-family: sans-serif;
font-size: 0.8rem;
font-weight: lighter;
padding-top: 8px;
border-top: 1px solid #cccccc;
background-color: #000 !important;
padding: 10px 0;
}
</style>
</head>
<body>
<nav>
<ul class="main-nav">
<li><a href="https://genealogiskforum.dk" >Velkommen</a></li>
<li><a href="https://genealogiskforum.dk/slaegtstrae" >Slægtstræ</a></li>
<li><a href="https://genealogiskforum.dk/Gf_Magasin" >Gf magasin</a></li>
<li><a href="https://genealogiskforum.dk/gravsten_pk" >Gravsten</a></li>
<li><a>Arkivalier og værktøjer</a>
<ul>
<li><a href="https://genealogiskforum.dk/arkivalier/canvas" >Geografisk indgang</a></li>
<li><a href="https://genealogiskforum.dk/arkivalier/kirkeboeger_2" >Kirkebøger</a></li>
<li><a href="https://genealogiskforum.dk/arkivalier/folketaellinger" >Folketællinger</a>
<ul>
<li><a href="https://genealogiskforum.dk/arkivalier/ft/ft_light/" >Folketællinger light</a></li>
</ul>
</li>
<li><a href="http://genealogiskforum.dk/arkivalier/stednavne" target="_blank">Stednavne</a></li>
<li><a href="https://genealogiskforum.dk/arkivalier/skifter_staden" >Skifter Staden</a></li>
<li><a href="https://genealogiskforum.dk/arkivalier/kancelli" >Kancelli m.m.m.</a> </li>
<li><a href="https://genealogiskforum.dk/arkivalier/allearkivalier" target="_blank">Alle arkivalier</a></li><li><a href="http://genealogiskforum.dk/laegdsruller.php" target="_blank">Lægdsruller</a></li><li><a href="http://geltzer.dk/kirkeaaret.php" target="_blank">Kirke kalender</a></li><li><a href="http://genealogiskforum.dk/arkivalier/tools" >Nyttige links</a></li><li><a href="http://genealogiskforum.dk/arkivalier/herredsbyfogeder" >Herreds- og Byfogeder</a> </li><li><a href="https://genealogiskforum.dk/arkivalier" >Om Arkivalier</a></li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
What I would like to add, is that when hovering down over the drop down list, so it should be the whole with of the entry that takes the hover effect, and not just the text part of it.Does it not do that already?
But I have one problem. I have had to "hard code" the positioning of the sub-sub in the code below to get it shown right. But this will be a problem when I need to update the drop down list. Is there a way we can force it to display exactly to the right of its parent?That is as a result of mixing my two solutions. The first used the generic method of positioning the flyout - the second implementation I interpreted you wanting to have the entire sub-sub menu to be black and full height of main menu - so I removed the relative positioning.
In your code above change this
/*ul.main-nav ul li {
position: relative;
}*/
ul.main-nav ul ul {
position: absolute;
left: 100%;
height: inherit;
top: 18%;
}
ul.main-nav ul li {
position: relative;
}
ul.main-nav ul ul {
position: absolute;
left: 100%;
height: inherit;
top: 0;
}
To add down arrows - you can do this in a number of ways to do this. One is to add a background image to the <li> with the image of the down arrow you want. Or you could use a font library like font-awesome as I have in this updated sample
ASKER
Thanks Julian,
I will work your changes in at once.
As for the first issue - No it does not have this now.
This is how it looks now:
And this is what I would like it to look like:
I will work your changes in at once.
As for the first issue - No it does not have this now.
This is how it looks now:
And this is what I would like it to look like:
Ok so you want the highlight to be full width - not the hover area (which is already full width)
What you want to do is remove the margin on the <a> and make it display block (full width). You can do it like this
What you want to do is remove the margin on the <a> and make it display block (full width). You can do it like this
ul.main-nav a {
display: inline-block;
font-family: sans-serif;
font-weight: lighter;
font-size: 0.8rem;
line-height: 1rem;
color: #e6e6e6;
/* margin-left: 10px; REMOVE THIS */
text-decoration: none;
white-space: nowrap;
padding: 10px 16px;
display: block; /* ADD THIS */
}
ASKER
That is so beautiful :) Everything is working right now.
Just one little thing. I would like to position the fa-angle-double-right as far right as possible. I have tried with float: right, but it seems to push it half a line down. Just giving you the code in question here
Just one little thing. I would like to position the fa-angle-double-right as far right as possible. I have tried with float: right, but it seems to push it half a line down. Just giving you the code in question here
<li><a href="https://genealogiskforum.dk/arkivalier/folketaellinger" >Folketællinger <span <i class="fa fa-angle-double-right" style="padding-left: 15px;"></span></i></a>
SOLUTION
THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
ASKER
@ Julian,
One more little thing.
I am struggling to add a little more padding between lines in the dropdown list, but I am stuck :)
Can you help?
One more little thing.
I am struggling to add a little more padding between lines in the dropdown list, but I am stuck :)
Can you help?
ASKER
Thanks @Slick812,
I will look into it, and get back asap
I will look into it, and get back asap
ASKER
@Julian,
Forget about the spacing between lines in the drop down list. I have wrapped it in it's own class, and can control it nicely through this class.
But I be very happy if have the idea how to position the "fa-angle-double-right" signs as far to the right on the line as possible :)
http://kroweb.dk/gfdev/templates/julian.php
Forget about the spacing between lines in the drop down list. I have wrapped it in it's own class, and can control it nicely through this class.
But I be very happy if have the idea how to position the "fa-angle-double-right" signs as far to the right on the line as possible :)
http://kroweb.dk/gfdev/templates/julian.php
ASKER CERTIFIED SOLUTION
THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
ASKER
Thanks to Julian and Slick812,
I have ended up using Julians solution since it fits my needs best. Thank you Julian for assisting me to get this work all the way :)
Also thanks to Slick812 for participating with a very good input.
I have ended up using Julians solution since it fits my needs best. Thank you Julian for assisting me to get this work all the way :)
Also thanks to Slick812 for participating with a very good input.
You are welcome.
HTML
HTML (HyperText Markup Language) is the main markup language for creating web pages and other information to be displayed in a web browser, providing both the structure and content for what is sent from a web server through the use of tags. The current implementation of the HTML specification is HTML5.
62K
Questions
--
Followers
--
Top Experts
Get a personalized solution from industry experts
TRUSTED BY
If it's just for visual effect, I would suggest you keep it real simple and just indent the text of the child link (padding-left: xxpx) to give the effect that it's subservient:
Item 1
Item 2
Item 3
Item 3a
Item 4
Item 5