I have a div with a fixed position (a top panel) which shall also contain a settings menu at the far right (currently via floating).
When hovering over the settings-image, I want to display a menu below the image.
I want the menu to be aligned to the right side just like the image.
<div id="panel" style="position:fixed">
<panel-entry 1>
<panel-entry 2>
<panel-entry n>
<div id="settings" style="float:right/snapped to the right side>
<img src=settings>
<ul>
<li>setting 1</li>
<li>setting 2</li>
<li>setting n</li>
</ul>
</div>
</div>
Any idea using jQuery very much appreciated, feel free to rearrange any html.
No jQuery necessary, just give your #panel a width:
#panel {
position: fixed;
width: 100%;
}
#settings {
float: right;
}
See DEMO.
Aside from your example not being HTML, I would anyhow correct the conceptual approach. There is no jQuery required for such a task, which can be done entirely in CSS.
You want your #panel to first of all contain a <ul> which will contain <li>s, which will be your <panel-entry>, those should be set as inline-block.
The #settings should be one of those, perhaps with a special class or id (we'll keep settings for now). You can position: absolute this to right: 0, or have it float. Don't use an image element for this, but rather use a background-image.
Inside this element, you will have a submenu: i.e. another <ul> with display: none, a position:absolute, right: 0 and top: X, so that X doesn't overlap with your #panel.
Next, you want to make the element visible on :hover of li#settings.
Here's a working demo
Basic HTML
<div id="panel">
<ul>
<li>Panel entry 1</li>
<li>Panel entry 2</li>
<li>Panel entry n</li>
<li id="settings">
<ul>
<li>setting 1</li>
<li>setting 2</li>
<li>setting n</li>
</ul>
</li>
</ul>
</div>
Basic CSS
#panel {
position: fixed;
top: 0;
width: 100%;
}
#panel > ul > li {
display: inline-block;
}
#panel > ul > li > ul {
display: none;
position: absolute;
top: {X};
right: 0;
}
li#settings {
background: url({youricon}) no-repeat top center;
position: absolute;
right: 0;
min-width: {youricon-x};
min-height: {youricon-y};
}
li#settings:hover > ul{
display: block;
}
Related
I have made a single page which has a navbar and with links pointing to section id in the page.
However, when I click on the link the section of the page scrolls down till the top of the section and due to my sticky navbar, the top part of my section goes behind it.
How do I create an offset height which would match my navbar height so that the div is visible at the right position?
Here is my a screenshot of what is happening.
Also, is there a way to smoothly scroll till the section? What is the easiest method to achieve this?
My example code:
HTML:
<nav>
<ul>
<li>Section 1</li>
<li>Sction 2</li>
<li>Section 3</li>
</ul>
</nav>
<div id="section1">Section 1</div>
<div id="section2">Section 2</div>
<div id="section3">Section 3</div>
Offsetting anchor hash tag links to adjust for fixed header
HTML :
Goto Section I
<!-- Some more content -->
<h3 id="section1" class="offset">Section I</h3>
<p>Section specific content</p>
CSS:
.offset:before {
display: block;
content: " ";
height: 150px; /* Give height of your fixed element */
margin-top: -150px; /* Give negative margin of your fixed element */
visibility: hidden;
}
Give padding-top to that section which is equal to the header height. Like if your header has a height: 40px then give padding-top: 40px to that section.
Have a look at the snippet below:
body {
margin: 0;
padding-top: 50px;
}
nav {
background: #eee;
position: fixed;
top: 0;
left: 0;
width: 100%;
}
ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
}
li {
padding: 15px;
}
.sec {
height: 200px;
margin-bottom: 30px;
background: #ff0;
padding-top: 48px;
}
<nav>
<ul>
<li>Section 1</li>
<li>Section 2</li>
<li>Section 3</li>
</ul>
</nav>
<div id="section1" class="sec">Section 1</div>
<div id="section2" class="sec">Section 2</div>
<div id="section3" class="sec">Section 3</div>
Hope this helps!
I have a site I'm working on where I have a nav bar in a div at the top of the page followed by a separate div which contains an image directly below it.
I'm trying to figure out the best way to change the image by hovering over each part of the nav bar.
Basically I want an image for home to show up when the home nav feature is hovered and so on with the rest of the menu.
UPDATE:
As I tried to explain before (not as clear as I could have) I want to make each nav bar element (Home, Downloads, etc.) show a different image in the div below it. Here is the section of code for the two elements.
<li class="active">Home</li>
<li >About</li>
<li >Mods</li>
<li>Forums</li>
<li >Downloads</li>
<li>Blog</li>
</ul>
</div>
</nav>
<div class="parallax-container">
<div class="container" style="background: rgb(55,71,79); width:960px; padding-top: 10px; padding-left: 50px; border: 2px; border-radius: 50px;">
<div class="row">
<div class="hover-image white-text col s12 l6">
<img src="homeimage.png" class="hover image" style="height:auto; width:auto; max-width: 860px; max-height: 860px;"/>
<h5 class="hover-header" style="padding-left: 20px;">Home</h2>
<p class="hover-paragraph" style="padding-left: 25px;">Welcome to the page!</p>
</div>
</div>
</div>
<div class="parallax"><img src="/img/image.png"></div>
</div>
<style>
.hover-image {
position: relative;
width: 100%;
margin: auto;
}
.hover-header {
position: absolute;
top: 350px;
left: 10;
width: 100%;
}
.hover-paragraph {
position: absolute;
top: 380px;
width: 100%;
}
</style>
Page Layout
Try CSS something like this;
.nav:hover .image{
background-image: url('path/to/image.ext');
}
If you can share your code, I can be more specific.
try this code -
CSS -
#navImage img{
display:block;
width:500px;
height:auto;
}
#myNav{
list-style-type: none;
}
#myNav li {
display: inline;
padding: 10px;
}
#myNav li a:hover {
color:#00ffff;
}
#navImage img{
display:none;
}
HTML
<ul id="myNav">
<li>Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
<div id="navImage">
<img src="img_chania.jpg" alt="Chania">
<img src="img_chania2.jpg" alt="Chania">
<img src="img_flower.jpg" alt="Flower">
<img src="img_flower2.jpg" alt="Flower">
</div>
JS to initialize (with jQuery) -
$("#myNav li a").on('mouseover', function(){
$("#navImage img").hide().eq($(this).closest('li').index()).show();
});
Please note, if you are working on responsive design(using bootstrap navigation), you need to do changes accordingly.
jsfiddle - https://jsfiddle.net/guruling/k2zgot5r/
.myButtonLink {
display: block;
width: 100px;
height: 100px;
background: url('/path/to/myImage.png') bottom;
text-indent: -99999px;
}
.myButtonLink:hover {
background-position: 0 0;
}
<a class="myButtonLink" href="#LinkURL">Leaf</a>
Do you want something like this. Please check this link:-http://kyleschaeffer.com/development/pure-css-image-hover/
I'm trying to make a full screen menu, and I managed to have the block of a width: 100%; and min-height: 100%;. Now my page is a bit longer so when I scroll down, I see the full screen menu, does not apply for the rest of the page.
nav block is outside the container
<nav id="site-nav" class="clearfix" style="display: block;">
<div class="menu-wrap">
<ul id="menu-main-menu" class="menu">
<li id="menu-item-44" class="menu-item current_page_item menu-item-home">Home</li>
<li id="menu-item-18" class="menu-item">UI/UX Designer</li>
<li id="menu-item-21" class="menu-item">Front-End DEV</li>
<li id="menu-item-25" class="menu-item">Contact</li>
</ul>
</div>
<!-- end .menu-wrap -->
CSS:
#site-nav {
display: none;
background: rgba(34, 34, 34, 1);
position: absolute;
z-index: 1;
width: 100%;
min-height: 100%;
top: 0px;
}
Is there a way to disable scrolling when this menu is triggered? Or some CSS trick?
Note:
As a final result, I want the body to be 100%, only when the menu block is triggered. Any solutions for that?
The simplest way to disable scrolling is to just use overflow: hidden; on the element that should not contain scroll (it can be body tag).
But in this case I propose to set position: fixed; instead of absolute and than your menu will be always fullscreen (but it will not hide scrollbar). It is totally the simplest way, and will not cause problems as body with overflow:hidden; and max-width: 100%; can do.
Set the body,html max-height to 100%, and overflow: hidden;
HTML:
<nav id="site-nav" class="clearfix" style="display: block;">
<div class="menu-wrap">
<ul id="menu-main-menu" class="menu">
<li id="menu-item-44" class="menu-item current_page_item menu-item-home">Home</li>
<li id="menu-item-18" class="menu-item">UI/UX Designer</li>
<li id="menu-item-21" class="menu-item">Front-End DEV</li>
<li id="menu-item-25" class="menu-item">Contact</li>
</ul>
</div>
<!-- end .menu-wrap -->
CSS:
body,html {
overflow: hidden;
max-height: 100%;
}
#site-nav {
display: none;
background: rgba(34, 34, 34, 1);
position: absolute;
z-index: 1;
width: 100%;
min-height: 100%;
top: 0px;
}
Is this possible without the help of javascript?
Typically we have menu bars at the top of the page - we place them as a child of body and then absolutely position them e.g. top: 10px; right: 10px;.
What if we want to achieve the same goal but as a context menu further down the page?
I have started a fiddle to give an idea - here there's no positioning, we just have the default of overflow: visible.
I can't absolutely position it because I don't know the x,y due to the dynamic nature of the content that precedes it.
The only way I can think of is go down the traditional route of the top nav bar, and with javascript find the x,y of it's container and position it there. However I would need to manage that if the content that precedes it changes then it's position needs to change also.
Does anyone know of a "stick-to" jquery method. Or even better achieve it with pure css?
Thanks
here's my crude fiddle - click "one" http://jsfiddle.net/hHR23/1/
I think you want this but I'm not certain from your description:
http://jsfiddle.net/samih/hHR23/2/
Notice this:
.section {
height: 58px;
background-color: yellow;
position: relative;
}
And this:
.menu {
position: absolute;
}
Now your menu will follow with the "dynamic" page because the absolute position is relative to the "position: relative" container.
Another approach - Fiddle.
HTML
<div class='header'>Header</div>
<div class='floatingmenu'>
<ul class="menu">
<li>One
<ul class="sub-menu">
<li>one a</li>
<li>one b</li>
<li>one c</li>
<li>one d</li>
<li>one e</li>
<li>one f</li>
<li>one g</li>
</ul>
</li>
<li>Two</li>
<li>Three</li>
</ul>
</div>
CSS
.header {
height: 40px;
background-color: blue;
}
.floatingmenu {
width: 30%;
height: 30%;
background-color: green;
color: white;
border: 10px solid white;
border-radius: 10px;
margin: 20px auto;
}
.footer {
height: 200px;
background-color: yellow;
}
I created a menu in html/css but where I wanted the subitems to be shown on parent item hover. The problem is when I hover on it in IE it only shows it's subitems when I hover on the text in the menu item, If I hover over the element and not the text the subitems disappear again. So if I hover and want to move my mouse to my submenu the submenu disappears unless I'm fast enough. This is very annoying, does anyone know how I can solve this?
MY menu code is like so:
<ul id="leftnav">
<li><a>Item1</a></li>
<ul>
<li><a href='#'>SubItem1</a></li>
<li><a href='#'>SubItem2</a></li>
<li><a href='#'>SubItem3</a></li>
</ul>
<li><a>Item2</a></li>
<ul>
<li><a href='#'>SubItem1</a></li>
<li><a href='#'>SubItem2</a></li>
<li><a href='#'>SubItem3</a></li>
</ul>
</ul>
The menu should be a left sided menu which shows it's subitems only on hover, so I used css to achieve this with the following code:
#leftnav, #leftnav ul
{
padding: 0;
margin: 0;
}
#leftnav ul li
{
margin-left: 102px;
position: relative;
top: -19px; /*sets the childitems on the same height as the parent item*/
}
#leftnav li
{
float: left;
width: 100px;
}
#leftnav ul
{
position: absolute;
width: 100px;
left: -1000px; /*makes it disappear*/
}
#leftnav li:hover ul, #leftnav li.ie_does_hover ul
{
left: auto;
}
#leftnav a
{
display: block;
height: 15px;
margin-top: 2px;
margin-bottom: 2px;
}
Since this only works with firefox I also had to insert a javascript to get this to work in IE using code:
<script language="JavaScript">
sfHover = function()
{
var sfElsE = document.getElementById("leftnav").getElementsByTagName("LI");
for (var i=0; i<sfElsE.length; i++)
{
sfElsE[i].onmouseover=function()
{
this.className+=" ie_does_hover";
}
sfElsE[i].onmouseout=function()
{
this.className=this.className.replace(new RegExp(" ie_does_hover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
Many many many thanks for replies
In your CSS you have:
#leftnav li:hover ul
Which would mean the rule is applied to ul elements that are children of li elements when that parent li is hovered.
But in your HTML, you have:
<li><a>Item2</a></li>
<ul>
<li><a href='#'>SubItem1</a></li>
</ul>
So the sub item ul is not a child of the item ul, so that rule never comes true. You need to make the sub-items nested to the items. Like this:
<ul id="leftnav">
<li><a>Item1</a>
<ul>
<li><a href='#'>SubItem1</a></li>
<li><a href='#'>SubItem2</a></li>
<li><a href='#'>SubItem3</a></li>
</ul>
</li>
<li><a>Item2</a>
<ul>
<li><a href='#'>SubItem1</a></li>
<li><a href='#'>SubItem2</a></li>
<li><a href='#'>SubItem3</a></li>
</ul>
</li>
</ul>
Notice how I don't close the list item until after the sub-list.
Reinventing the wheel: http://www.htmldog.com/articles/suckerfish/ teaches you about it. They even have a great example.