Is it possible with pure css or really simple way to transfer nav ul menu as dropdown list when body width is smaller than given (media css) (mobile phones etc)
<nav>
<ul>
<li>Blog</li>
<li>About</li>
<li>Archives</li>
<li>Contact</li>
<li class="subscribe">Subscribe via. RSS</li>
</ul>
</nav>
Assuming: I want to display it normally, but when on mobile with narrow screen, want to display it as dropdown menu - same as select form.
[edit]
something like: http://themewich.com/aware/ -see the menu when resized.
I don't know what you want exactly but this maybe can help you .I hope
<nav>
<ul> Test
<li>Blog</li>
<li>About</li>
<li>Archives</li>
<li>Contact</li>
<li class="subscribe">Subscribe via. RSS</li>
</ul>
</nav>
ul li{
display:none;
}
ul:hover li{
display:block;
}
jsFiddle
You can detect the screen width using javascript, and if the screenwidth is too small, you can change the list to a dropdown menu using tags. Google "javascript innerHTML" for more info how to do this.
If you look at the example URL with CSS disabled (or view the source), you will see that both types of navigation are present (nested list and form select). The page is using media queries to determine which element to hide: narrow devices will hide the list version while wide devices will hide the form version.
Related
I have created this nav with a div who has those li inside
<nav>
<div class="nav-links">
<li>Αρχική</li>
<li>Προϊόντα</li>
<li>Φωτογραφίες</li>
</div>
</nav>
Also, I have created a "burger" div that functions as a button, when someone is on phone, and whenever you click on it, it shows Αρχική,Προϊόντα,Φωτογραφίες.
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
However whenever someone is on phone and clicks on it I want to have one more li called "Google Maps".
Is there anyway I can do this using Javascript?
The simplest way of achieving this is via CSS - having a media query that shows the Google maps link only at mobiles screen size . The following media query will hide the li with the maps-link class for any screen size 768px and up.
You can see this in action here by viewing the snippet below (equivalent to small screen in which you will see the maps link since the width is not wide enough to match the media query.... then clicking the "full-screen" link to toggle to full screen and now the maps link will not show - because the width is wide enough totrigger the media query.
Also note that li's are children of a ul element - not a div.
And that rather than creating two seaprate nav lists - one for phone and one for not-phone... it is better to have a single list and style it accordingly for different viewports.
#media only screen and (min-width: 768px) {
.maps-link {
display: none;
}
}
<nav>
<ul class="nav-links">
<li>Αρχική</li>
<li>Προϊόντα</li>
<li>Φωτογραφίες</li>
<li class="maps-link">Google maps</li>
</ul>
</nav>
So I'm fiddling around with this design I found on http://cssmenumaker.com/menu/responsive-flat-menu but I'm having a bit of an issue when the navbar is scaled down in the browser. So full width of the browser it looks like img 1 below....and when scaled down it turns into a hamburger menu with a dropdown as depicted in img 2. The problem is it repeats since I added an extra li tag to add in 'Super Awesome Menu'. So, my question is how to remove that extra repetition in img 2(it should retain in in full width like img 1).
I tried some of the simple removeclasses but they did not work. I'm sure it's super simple and I'm just failing to see it.
I stuck the code up here (since for whatever reason it's a huge pain to indent jquery on here)
http://codepen.io/anon/pen/NxZLKo
<body>
<div id="wrapper">
<header>
<nav>
<div id='cssmenu'>
<ul>
<li>Super Awesome Menu</li>
<li><a href='#'>Home</a></li>
<li class='active'><a href='#'>About</a></li>
<li><a href='#'>Activities</a></li>
<li><a href='#'>Resources</a></li>
<li><a href='#'>Contact</a></li>
<li><a href='#'>Join</a></li>
</ul>
</div> <!--end cssmenu-->
</nav> <!--end nav-->
</header> <!--end header-->
</div> <!--end wrapper-->
You can do that using media queries. Put this line of code in you css and you are good to go.
#media screen and (max-width: 926px) { #cssmenu ul.open li:nth-child(1){ display:none !important; } }
It will hide the first child in this case super mega awesome if you do li:nth-child(2) it will hide Home etc.
I think there's no extra link "Super Awesome Menu"
It's just the name of your menu as you configured it on lines 5 & 73 in Javascript Section of your code snippet. It's your title parameter
$("#cssmenu").menumaker({
title: "Super Awesome Menu",
format: "multitoggle"
});
Just let it empty or find another name !
Try this css
#media screen and (max-width: 680px) { #cssmenu ul.open
li:first-child{
display:none !important; } }
I am trying to use this menu on my web, but here have a problem, that is how to keeping the menu active?
I hope when the user browse the Home page, the menu bar will like this:
I found some example, like add the class ".active",
and put it in <li>, like:
<li class="active">Home</li>
But, it not working.
HTML:
<div class="rmm" data-menu-style='graphite'>
<ul>
<li><a href='#home'>Home</a></li>
<li><a href='#about-me'>About me</a></li>
<li><a href='#gallery'>Gallery</a></li>
<li><a href='#blog'>Blog</a></li>
<li><a href='#links'>Links</a></li>
<li><a href='#sitemap'>Sitemap</a></li>
</ul>
</div>
Here is the demo:
http://jsfiddle.net/7jgkzdf7/
Yesterday, I had been ask this question, however I make a lot of mistakes, I am sorry about that!
Now, I post again. Please help me to fix this problem!
Thanks!!!
Try something like this
JS:
$(".rmm ul li a").on('click', function () {
this.addClass('active');
});
CSS:
.rmm ul li a {
url('http://responsivemobilemenu.com/demo/rmm-img/graphite-menu-bg-hover.png')
}
But this RMM (responsive mobile menu) is not good practice ... try to use Bootstrap. They have easy documentation and very good mobile first elements.
Try it here Bootstrap
I have tried for months to find away of connecting my menu, but frustratingly I've had no luck. I don't know what else I can try so I want to ask you guys if you can help. I searched around here on Stack for an idea, this someway to describe the function I want but I'd like to utilise the data-attribute way instead of href and I want to use the on click function instead of the hover, as it's for desktop and mobile. I also want to close the submenu with the menu a on desktop version, would toggle be an option?
link: jquery dropdown with separate container
html
<div class="menu">
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
</div>
<div class="submenu">
<ul>
<li class="one">content1</li>
<li class="two">content2</li>
<li class="three">content3</li>
</ul>
</div>
content from submenu ul li is set to height:0 that I want to set to auto when triggered, or maybe add a class to the submenu ul li:
.submenu ul li{
display:block;
overflow:hidden;
height:0;
.submenu ul li.active{
height:auto;
}
JS Fiddle
I'm not sure if this is what you want, but try replacing
$(this).attr('data-section').slice(1)
with this
$(this).attr('data-section')
jsfiddle (based in yours)
Just remove the .slice(1). I don't know why you add this one.
when you click on the menu link, jquery will remove active class from list and it will added to a new link related to menu link by data-section.
I have an issue with a responsive menu containing an input.
The original thread is here:
Fixed Responsive Top Nav / Off Canvas Nav with Single DOM Element
If I add an extra li, with an input (for a search field), I get a jump if I click the input. This happens only if I have scrolled before opening the sidebar.
ul class="left">
<li class="divider divider-first"></li>
<li class="active">Main Item 1</li>
<li class="divider"></li>
<li>Main Item 2</li>
<li>
<form method="get" action="/search.html">
<input type="text" placeholder="Search" name="Search">
</form>
</li>
</ul>
Here's the fiddle with the extra li: http://jsfiddle.net/29qgW/5/
If you open the result window on an iPhone, you can see it happening.
Some kind of margin gets added above both the sidebar and the top bar. I tried to find it with the iOS simulator, but the margin is not really there as a style.
It gets even worse if you try to scroll after having selected the input. How can this be fixed? I've tried to change the metatag to disallow user zooming, but that doesn't work.
Does anyone know how to fix this?
Update: edited to show metatag, and closed input tag.