How can i use position: fixed; for my menu, when it isn't the first element on the website.
My logo is the top item on the website, thereafter the menu. When i scroll down the page i want the menu to be the top element. How can i do this? And is it possible with only css?
This would require the use of javaScript, but can be done quite simply.
Example
JsFiddle
HTML
<header>
<p class="site-title">
Your logo here
</p>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</header>
CSS
ul{
background-color: red;
margin: 0;
}
ul li{
display: inline;
}
.fixed{
position: fixed;
top: 0;
left: 0;
width: 100%;
}
jQuery
$(function ()
{
// Get the initial position of the menu.
var menuTop = $('nav').offset().top;
$(window).scroll(function ()
{
// Check position
if ($(window).scrollTop() > menuTop)
{
$('nav').addClass('fixed');
}
else
{
$('nav').removeClass('fixed');
}
});
});
Related
Having read this after struggling with an absolute-positioned sub-menu that will not appear above page content on desktop breakpoints, I stripped all offending CSS identified in the article, but to no avail. The sub-menu in the below HTML will not appear above page content, despite having absolute position with z-index applied. Anyone with further thoughts on the issue, please let me know -- I'm baffled.
<nav id="nav-main" role="navigation">
<ul class="site-nav site-nav__main">
<li class="nav__menuitem nav__menuitem--main first level1"><a class="nav__menulink nav__menulink--main transition" href="my-link">my-link</a></li>
<li id="subNav__parent" class="nav__menuitem nav__menuitem--parent transition clearfix level1">SubNav Toggle Label<span class="subNav__toggle">+</span>
<ul class="subNav">
<li class="nav__menuitem nav__menuitem--subnav first level2">
<a class="nav__menulink nav__menulink--main transition" href="my-link2">my-link2</a>
</li>
<li class="nav__menuitem nav__menuitem--subnav last level2">
<a class="nav__menulink nav__menulink--main transition" href="my-link3">my-link3</a>
</li>
</ul>
</li>
</ul>
</nav>
.site-nav {
margin: 0;
padding-left: 1rem;
padding-right: 1rem;
list-style-type: none;
transition: .2s ease-out; /*related to a different transition; not relevant to the issue being
posted about*/
transform: translateY(0%);
}
// SUBNAV
.nav__menuitem--parent { /*this is the click element used to open / close the sub-menu
position: relative;
cursor: pointer;
}
.subNav {
position: absolute;
z-index: 10;
margin: 1rem auto 0 auto;
padding: 1rem 0;
width: 250px;
visibility: 0;
}
.subNav.open {
transition-property: visibility, max-height;
transition-duration: .5s;
transition-timing-function: ease-out;
max-height: 500px; /* approximate max height */
visibility: 0;
}
The solution I implemented doesn't address the fact that the HTML and CSS as written should work but doesn't, but FWIW, I z-indexed the header element and positioned it above the wrapping element for page content. Since the submenu is a child of the global nav, which in turn is a child of the header element, it's stack order is equivalent to the header's per the z-index default value of auto.
When specifying position: absolute; the item will be positioned relative to its parent. You need to specifiy top:0 or similar to override this.
Here is a quick fiddle to illustrate
.parent-nav {
background-color:red;
position:absolute;
top:0;
width:100%;
}
.sub-nav-parent {
background-color:blue;
position:relative;
}
/* 10px below sub nav parent */
.sub-nav-child {
background-color:cyan;
position:absolute;
top:10;
left:0;
z-index:99;
width:100%;
}
<div class="page-content">
<h1>
This is my page content
</h1>
<p>Page body page body</p>
<p>Page body page body</p>
<p>Page body page body</p>
<p>Page body page body</p>
<p>Page body page body</p>
<p>Page body page body</p>
<p>Page body page body</p>
<p>Page body page body</p>
<p>Page body page body</p>
<p>Page body page body</p>
<p>Page body page body</p>
<p>Page body page body</p>
</div>
<div class="parent-nav">
<ul class="sub-nav-parent">
<li>Sub Nav Parent</li>
<li>
<ul class="sub-nav-child">
<li>Child 1</li>
<li>Child 2</li>
</ul>
</li>
</ul>
</div>
Here is the code below,
I need the the dropMenu div after scrolling the nav to change its position (as much as nav scrolling). to stay below the (i) element
<nav>
<ul>
<li>
<a onclick={this.setState(prevState => {showDropMenu:!prevState.showDropMeny})}>
<i class="fas fa-ellipsis-h" />
</a>
</li>
{showDropMenu &&<div className="dropMenu"></div> }
</ul>
</nav>
nav {
overflow-y: visible;
overflow-x: hidden;
max-height: 70vh;
}
ul {
list-style-type: none;
min-width: 15vw;
padding-left: 0;
}
is there any big or small change can I make to achieve that ?
You can take a look on this example https://www.w3schools.com/howto/howto_js_sticky_header.asp
Below you can see quick example which I have made with your code
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
showDropMenu: true
};
}
render() {
return (
<div className="App">
<nav>
<ul>
<li>
<a
onClick={() =>
this.setState({ showDropMenu: !this.state.showDropMenu })
}
>
<i className="fas fa-ellipsis-h" /> Click Me
</a>
</li>
{this.state.showDropMenu && (
<div className="dropMenu">Drop Menu</div>
)}
</ul>
</nav>
<div className="content">
Some Text Some Text Some Text Some Text Some Text
</div>
</div>
);
}
}
nav {
background-color: blue;
position: fixed;
top: 0;
width: 100%;
}
ul {
list-style-type: none;
min-width: 15vw;
padding-left: 0;
}
.content {
margin-top: 100px;
}
I'm trying to adapt this jsfiddle to work without radio button since I cannot use any <form> related tags, and neither javascript!
I "transformed" the <input type='radio'> into <a> tags, and transform the :checked pseudo class into :target
as you can see in this CodePen.
but it does not work :-(
And also solution I used to show first Tab is not usable
Can suggest what's wrong?
Thanks
Joe
Alright, using the :target pseudo-class we can achieve this.
EDIT: I added a wrapper div so you can use position absolute on the panels. This allows you to have the first panel open and switch between them.
.wrapper {
position: relative;
}
.tab-container {
display: none;
position: absolute;
top: 0;
left: 0;
background: red;
}
.tab-container:first-child { display: block }
:target { display: block }
/* just for demo */
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
display: inline-block;
margin-right: 1rem;
}
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
<div class="wrapper">
<div id="tab-1-container" class="tab-container">
Tab 1 content
</div>
<div id="tab-2-container" class="tab-container">
Tab 2 content
</div>
<div id="tab-3-container" class="tab-container">
Tab 3 content
</div>
</div>
Question: How do I get this to work for tabbing, using CSS only? (Tabbing already works).
#menu:before {
content:"Menu \25bc";
font-weight:bold;
width:100%;
}
#menu:hover:before {
content:"Menu \25b2";
}
#menu li {
position:absolute;
left:-9999px;
}
#menu:hover li {
position:relative;
left:0;
}
<html>
<title>Test</title>
<body>
<header>
Link to homepage
</header>
<nav>
<ul id="menu">
<li>Menu item 1</li>
<li>Menu item 2</li>
</ul>
</nav>
<main>
<p>Other text with maybe a link here.</p>
</main>
</body>
</html>
EDIT: Original question follows.
I have a menu:
<ul id="menu">
<li>Menu item 1</li>
<li>Menu item 2</li>
</ul>
However, I want to hide it at a narrow page width, so I apply the following CSS:
#media (max-width: 768px) {
#menu:before {
content:"Menu \25bc";
}
#menu:hover:before {
content:"Menu \25b2";
}
#menu a {
position:absolute;
left:-9999px;
}
#menu:hover a {
position:relative;
left:0px;
}
}
This hides the menu, adds the word "Menu" in it's place, with a down or up arrow, depending on the hover state, which also shows the menu when you hover over it.
The problem is that, while :hover works just fine, I cannot get both to show by tabbing to one of the tags, using the :focus pseudo class. (Alas, :root will not work like other pseudo classes, so something like #menu a:focus:root #menu a { position:relative; left:0; } won't work, as far as I can see).
Does anyone have any ideas as to how I could approach this, using only CSS? Or have I dug myself into a hole?
Based on OP comment below:
I'm happy to change the HTML, but how would :target work here?
here is a snippet with :target
nav {
height: 0;
overflow: hidden;
position: relative;
}
nav:target {
height: auto;
}
nav + div a:before {
content: "Menu \25bc";
font-weight: bold;
width: 100%;
}
nav:target + div a:before {
content: "Menu \25b2";
}
nav:target + div .open,
nav + div .close {
display: none;
}
nav:target + div .close,
nav + div .open {
display: block;
position: absolute;
top: 0
}
<nav id="menu">
<ul>
<li>Menu item 1
</li>
<li>Menu item 2
</li>
</ul>
</nav>
<div>
<a class="open" href="#menu"></a>
<a class="close" href="#"></a>
</div>
I have been working on this website and am using media queries to adjust the layout of the view according to the screen size. For the mobile phone size I want to hide the navigation that is already in place and just show a simple "Menu" link that when clicked, displays the Nav Menu. I having been doing research, however I am looking for the simplest way possible with the code that I have. Any ideas would be greatly appreciated. I would like to stay away from javaScript if possible.
<nav>
<ul>
<li>Meet The Practioner</li>
<li>Services & Rates</li>
<li>Book Appointment</li>
<li>Location & Hours</li>
<li>Testimonials</li>
<li>Questions & Answers</li>
<li>Benefits of Massage</li>
<li>Body Sense Magazine</li>
</ul>
Menu
</nav>
This is my jsFiddle that shows the CSS and the rest of the code. http://jsfiddle.net/Floyd/v723oqfc/
So what you could do is:
Create a button called menu-bttn with the css:
a.menu-bttn {
display: none;
//Other properties
}
//You should really use javascript or jquery for button click rather than CSS
a.menu-bttn:focus > nav ul li a {
display: block;
}
...
#media only screen and (max-width:WIDTH) {
a.menu-bttn {
display: inline-block;
}
nav ul li a {
display: none;
width: 100%;
//positioning
}
}
JQuery Click Approach:
<script>
function toggleMenu() {
$('nav ul li a').slideToggle("fast");
}
</script>
<a onclick="toggleMenu()" class="menu-bttn">Menu</a>
OR
<script>
$(document).ready(function() {
$('.menu-bttn').click(function() {
$('nav ul li a').slideToggle("fast");
});
});
</script>
<a class="menu-bttn">Menu</a>
Documentation On SlideToggle: http://api.jquery.com/slidetoggle/
You dont HAVE to use SlideToggle, there are other options:
Documentation On Toggle: http://api.jquery.com/toggle/
Pure Javascript Approach:
<script>
var bttn = document.getElementsByClassName('menu-bttn');
var bttn = bttn[0];
function toggleMenu() {
var menu = document.getElementsById(//Id Of nav ul li a elements);
if (menu.style.display === 'none')
menu.style.display = 'block';
else
menu.style.display = 'none';
}
</script>
<html>
...
<a onclick="toggleMenu()" class="menu-bttn">Menu</a>
...
</html>