I have This Menu For Horizontal Menu. How To generate css for selected li or a.li.
HTML :
<ul class="arrowunderline">
<li>Home</li>
<li>New</li>
<li class="selected">Revised</li> <!-- IF a.LI selected <a class="selected" > END -->
<li>Tools</li>
<li>CSS</li>
<li>Forums</li>
</ul>
CSS:
ul.arrowunderline{
list-style-type:none;
margin:0;
padding:0;
text-align:center; /* enter "left", "right", or "center" to orient the menu accordingly */
font: bold 16px Georgia;
margin-top: 60px;
}
ul.arrowunderline li{
display:inline;
margin-right:25px; /* spacing between each menu item */
}
ul.arrowunderline li a{
position:relative;
color:black;
padding-bottom:8px; /*spacing between each menu item and arrow underline beneath it */
text-decoration:none;
}
ul.arrowunderline li a:hover:after{ /* use CSS generated content to add arrow to the menu */
content:'';
position:absolute;
left:50%;
margin-left:-75px;
margin-top: -60px;
width:150px;
height:40px;
background:url(http://i.stack.imgur.com/7jpU4.png) center bottom no-repeat;
}
UPDATE : Online Demo: http://jsfiddle.net/uc6Yz/2/
Might be you are looking for this:
//CSS
.selected{
background: red;
}
add this class to your <li> of respective page. let me explain if you are in home page add selected class to your <li class="selected"><a>Home</a></li> OR if you are in Forums page then add selected class to respective <li> like: <li class="selected"><a>Forums</a></li>
When you visit on home page the home menu get selected and when you visit on forum page forum menu get selected.
find here: http://jsfiddle.net/KkP7J/
You want that top border on permanent for selected right?
For this.
$('.arrowunderline li').on('click', function(){
$('.arrowunderline li').removeClass('selected');
$(this).addClass('selected');
});
are you looking for this?
ul.arrowunderline li.selected {
//place your code here (to modify list item)
}
ul.arrowunderline li.selected a {
//place your code here (to modify the "a" item when li is selected)
}
your question is a bit too dry, can you explain yourself al little bit more?
Related
I want to make navigation at the same level as h1 text and make it not movable and resizable. For now navigation is acting like random RWD, going below my h1 text, then changing display from left->right to top->bottom. I was trying to set ul position to static/absolute/fixed, nothing seems to work as I'd like.
JsFiddle example: https://jsfiddle.net/26tx3t3p/1/.
HTML:
<header>
<h1 class="logo"> myexamplesite</h1>
<nav class="primary">
<ul>
<li>info1/</li>
<li>info2/</li>
<li>info3</li>
</ul>
</nav>
</header>
CSS:
.logo{
font-size:36px;
font-weight:bold;
float: left;
display:inline-block;
}
a{
text-decoration:none;
}
.primary ul{
float:right;
display:inline-block;
}
.primary ul li{
float:left;
font-size:18px;
padding:10px 15px 0 0;
}
How to make navigation to be set at beggining position, after resizing window ??
Is there a way to do it, without putting stiff margin/width values ??
Do you mean something like that https://jsfiddle.net/26tx3t3p/3/
i added these css
header {
position:relative;
}
nav {
position:absolute;
right:0;
}
I have created a menu that is only visible on mobiles.
Using CSS I've managed to create a SHOW/HIDE NAVIGATION menu. You can see this in action at http://js.co.nz/mobile-test.php (currently only in portrait view on mobiles as that's as far as I've got with development).
I want to be able to show/hide the submenu items too (as the navigation menu is very long!). For example, if the user clicks on "Browse by type" I would like the submenu of: Chairs; Tables; Mirrors etc to appear.
The html currently looks like this:
<nav id="responsivenav" role="navigation">
Show navigation
Hide navigation
<ul>
<li>HOME</li>
<li>BROWSE ALL STOCK</li>
<li>BROWSE BY TYPE
<ul>
<li>Antique chairs</li>
<li>Dining tables</li>
<li>Antique mirrors<li>
</ul>
</li>
<li>BROWSE BY CATEGORY</li>
<li>BROWSE BY ROOM</li>
<li>REDUCED ITEMS</li>
<li>OPENING HOURS</li>
<li>NEWS</li>
<li>FIND US</li>
<li>ABOUT US</li>
<li>BROCHURES</li>
<li>PERIOD STYLES</li>
</ul>
<div class="clear"></div>
</nav>
The css looks like this:
#responsivenav {display:block;}
#responsivenav > a { }
#responsivenav:not( :target ) > a:first-of-type,
#responsivenav:target > a:last-of-type {
display: block;
height:50px;
line-height:50px;
font-size:15px;
margin-bottom:0;
padding:0;
text-indent:100px;
text-decoration:none;
color:#fff;
font-weight:bold;
text-transform:uppercase;
background: #393b3c url(../images/wd/mobile-menu-icon.jpg) no-repeat 40px center; }
/* first level */
#responsivenav > ul {
height: auto;
display: none;
border-bottom:5px solid #fff;}
#responsivenav:target > ul {
display: block;
list-style:none;
padding:0;
margin:0;}
#responsivenav > ul > li {
width: 100%;
float: none;
display:block;
height:60px;
line-height:60px;
font-size:15px;
text-indent:40px;
border-top: 1px solid #eee;}
#responsivenav > ul > li a {
text-decoration:none;
color:#393b3c;}
/* second level */
#responsivenav > ul > li > ul {
display: none;
}
#responsivenav > ul > li:hover > ul {
display:block;
}
It is this second level of the menu that I know I haven't got right. I've tried various ways of doing it e.g. adding classes to the submenus, using left:-9999px instead of display:none; etc but nothing seems to work yet.
Please help! I'm sure this should be so simple!
Just replace the property height: 60px to min-height: 60px of the #responsivenav > ul > li (line 138 in PhonePtest.css file).
Currently, your code makes the submenu appear on hover which in case of mobile works on click. That is why the navigation menu hides on click. To prevent this you can replace
BROWSE BY TYPE
with
BROWSE BY TYPE
You can do the same with the other menu elements.
How to click the navicon image in mobile phone (not hover) and it will show up a small container which has links. Here are my codings..
HTML
<div id="nav">
<ul class="menu">
<li> <a class="#"> LINK </a> </li>
<li> <a class="#"> LINK </a> </li>
<li> <a class="#"> LINK </a> </li>
<li> <a class="#"> LINK </a> </li>
</ul>
<img src="nav.png">
<div class="navimage">
<img src="twitter.png">
<img src="facebook.png">
</div>
</div>
CSS
#nav {
height:70px;
border-bottom:1px solid #FFF;
margin-bottom:20px;
padding:0;
max-width:95%;
margin:0 auto;
}
#nav-icon img {
display:none;
}
.menu {
float:left;
width:70%;
margin:0 auto;
}
.menu li {
display:inline;
}
.menu a {
padding:15px;
margin:15px 0;
display:inline-block;
text-align:center;
}
.menu a:hover {
color:#DEB887;
}
#nav a:hover {
text-decoration:none;
}
.navimage {
float:right;
margin:20px 0;
width:30%;
}
.navimage img {
width:30px;
height:30px;
margin:0 2px;
border-radius:50%;
-webkit-border-radius:50%;
-moz-border-radius:50%;
-ms-border-radius:50%;
-o-border-radius:50%;
float:right;
}
RESPONSIVE CSS
#media only screen and (min-width: 480px) and (max-width: 764px) {
#nav-icon img {display:inline-block;height:40px;margin-top:10px;margin-left:10px;cursor:pointer;}
#nav ul, #nav:active ul {
display:none;
position:absolute;
padding:15px;
background:#fff;
border: 3px solid #DEB887;
left:30px;
top:50px;
width:30%;
border-radius:0 0 3px 3px;
z-index:9999;
}
#nav:hover ul {display:block;}
#nav ul li a {width:100%;color:#000;padding:0;margin:10px 0;}
#nav ul li a:hover {color:#DEB887;}
}
Here is JSFIDDLE to check it out. The problem is I hover nav div everywhere and it shows menu. What I want is to click the navicon image and it will appear menu? Any ideas?
Thanks
You need a small bit of jQuery, which means including the library in your head and having a small piece of script in the head aswell.
First add this to the head:
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
That loads the latest version of jQuery for you.
Next you need to add the jQuery code in to make the nav work. Its a simple 3 line code that checks its been clicked and then toggles the display on and off.
<script type="text/javascript">
$(document).ready(function() {
$('#nav-icon').click(function() {
$('ul.menu').toggle();
});
});
</script>
As you can see, it finds the id nav-icon and when its been clicked, runs a function which toggles the visibility of the ul.menu.
jsFiddle Demo: http://jsfiddle.net/3w63B/2/
If you go on the mozilla developer network (link) or go to the jQuery API pages (link) you can pick up the basics pretty quick. It only starts getting difficult when you start getting jumping right into the deepend of what it can all do.
Hope this helps fella.
What do you think this line of code does?
#nav:hover ul {display:block;}
Everytime you hover the nav anywhere the submenu will appear.
Instead of CSS use javascript / jQuery to make it appear on click.
$("#nav-icon").on("click", function() {
$(".menu").css("display","block");
});
Although above code isn't exactly what you want, because the submenu will stay forever. This will help you finding a solution by yourself ;). Coding is doing.
I got this problem which i can't figure out.
#menuUL{
font-size:32px;
padding:0;
}
#menuUL li:first-child{
list-style-type: none;
}
#menuUL li{
margin-left:30px;
/*display: list-item;*/
display:inline;
list-style-type:disc;
}
I have a horizontal menu, but i only want the first item to hide it's list style type, the rest needs to show the disc. However then i will put 2 display's in the same li which causes it to display vertically instead of horizontal.
UPDATE.
the html code
<div id="photoMenu">
<ul id="menuUL">
<li>ALL</li>
<li>ARCHITECTURE</li>
<li>PEOPLE</li>
<li>LEGO</li>
</ul>
Try floating the li instead
JSfiddle Demo
CSS
#menuUL{
font-size:32px;
padding:0;
}
#menuUL > li:first-of-type {
list-style-type: none;
}
#menuUL li{
float:left;
margin-left:35px;
}
I have created a very basic hover css menu for a joomla site (I don't really want to get into jQuery if I can avoid it). It works fine in everything except IE (10,9...).
When you hover over the top level and move the move over the child menu the child menu persists in everything except IE.
How do I get IE to play ball?0
Here's the html:
<ul class="menu" id="mainMenu">
<li class="item-210"><a href="/index.php/home-2" >Home</a></li>
<li class="item-213 current active deeper parent"><a href="/index.php/xbus2" >xBus</a>
<ul>
<li class="item-214"><a href="/index.php/xbus2/vision" >Vision</a></li>
<li class="item-215"><a href="/index.php/xbus2/timetable" >Timetable</a></li>
<li class="item-217"><a href="/index.php/xbus2/xbus-mini" >xBus Mini</a></li>
<li class="item-218"><a href="/index.php/xbus2/xbus2" >xBus2</a></li>
</ul>
</li><li class="item-220 deeper parent"> etc ....
and here's the css
ul#mainMenu li {
position:relative;
}
ul#mainMenu ul {
position:absolute;
width:150px;
top:17px;
left:-9999px;
text-align:left;
background-color:#000;
z-index:5;
}
ul#mainMenu ul li {
display:block;
border-top:1px solid #999;
}
ul#mainMenu ul li:first-child {
border-top:none;
}
ul#mainMenu ul li a {
font-size:14px;
line-height:2em;
color:pink;
}
ul#mainMenu li:hover ul {
left:0px;
}
You should set the margin and padding to zero. IE has default value about this.
'ul#mainMenu ul {padding:0; margin: 0;}'
Make sure there is no margin between the elements which could be causing the issue. The IE dev tools will help with this.
Also, try applying a 1px transparent gif or png as the background of the child LI's - http://www.welovecss.com/showthread.php?s=4de6205bc9ac3ff2ead50464d123bcf4&t=6478&page=2
Hope it helps