I have a css menu in my aspx page.I want the selected menu to have the same style as hover menu(change the color).I have the css for both hover and current selected menu,and hover is working fine. I have googled this problem and solution was to set "class= current" in the li section of the html code.But my doubt is whether I have to set "class=current" each li sections or is there any need of javascript to report which one is selected out of the menu. I am newbie to css.Please help me..
<div id="tabsJ">
<ul class="menu">
<!-- CSS Tabs -->
<li><span>Reports</span></li>
<li><span>Employee</span></li>
<li><span>Equipment</span></li>
<li><span>Scanner</span></li>
</ul>
</div>
I have used this css
#tabsJ {
float:left;
width:100%;
background:#F4F4F4;
font-size:93%;
line-height:normal;
border-bottom:1px solid #24618E;
}
#tabsJ ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsJ li {
display:inline;
margin:0;
padding:0;
}
#tabsJ a {
float:left;
background: url("../images/tableftJ.gif") no-repeat left top;
margin:0;
padding:0 0 0 5px;
text-decoration:none;
}
#tabsJ a span {
float:left;
display:block;
background:url("../images/tabrightJ.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#24618E;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsJ a span {float:none;}
/* End IE5-Mac hack */
#tabsJ a:hover span {
color:#FFF;
}
#tabsJ a:hover {
background-position:0% -42px;
}
#tabsJ a:hover span {
background-position:100% -42px;
}
#tabsJ #current a {
background-position:0% -42px;
}
#tabsJ #current a span {
background-position:100% -42px;
color:#FFF;
}
Sam Warren - Added jsfiddle - http://jsfiddle.net/ejLTy/
Actually I have this menubar in the masterpage for all the four pages,DataLog.aspx,EmployeeDetails.aspx,EquipmentDetail.aspx and ScannerDetail.aspx.
No Need of JavaScript. Just change li as,
<li class="current"><span>Reports</span></li>
<li><span>Employee</span></li>
<li><span>Equipment</span></li>
<li><span>Scanner</span></li>
for page DataLog.aspx. Use the same routine for all pages by changing the li class as current.
For hover use the pseudo element property in css called
your_division:hover
Hey Just put class="current" in first li. you will get selection on each link. And also
Go to following link, you will get different kind of menus as well as you can customize menu also as per your requirement.:
http://www.cssmenumaker.com/
check it the example of your updated CSS i have just added (current) id in your li
and where you want the selected link add the current id in that particular li.
http://jsfiddle.net/ejLTy/2/
Related
My website shows different output in .aspx page while using same structure & CSS in html page it shows correct output but in apsx page css gets collapse. I check both code twice & it is same but output gets different.
HTML Page Output
ASPX page output
HTML Code
<!--bg-img-container-starts--><div class="bg-img-container">
<!--bg-img-starts--><div class="bg-img">
<!--header-starts--><div class="header">
<!--logo-starts--><div class="logo">
<h2><a title="Quista" href="#">Quista</a></h2>
</div><!--logo-ends-->
<!--menus-starts--><div class="menus">
<ul class="nav">
<li>Home <div class="pipe"></div></li>
<li>Services</li>
<li>Pricing</li>
<li>Track Orders</li>
<li>About Quista</li>
<li class="call">Call Us :- +91 1234 1245</li>
</ul>
</div><!--menus-ends-->
</div><!--header-ends-->
</div><!--bg-img-ends-->
CSS
html, body{
margin:0;
padding:0;
width:100%;
height:100%
}
.clear{clear:both}
body{
font-family:'Quicksand', sans-serif;
}
.bg-img-container{
width:100%;
position:relative;
height:100%
}
.bg-img{
width:100%;
max-height:768px;
height:100%;
background:url(../Images/0000.jpg) no-repeat;
background-size:cover;
}
.header{
width:100%;
max-width:1200px;
position:relative;
margin:0 auto;
padding:15px 0 0 0
}
.logo{
width:20%;
display:inline-block;
}
.logo h2{
font-family:'MyriadPro-BoldCondIt';
font-size:4em;
padding:0;
margin:0;
letter-spacing: 5px
}
.logo a{
color:#fff;
text-decoration:none
}
.menus{
width:79%;
display:inline-block;
}
.nav{
marging:0;
padding:0
}
.nav li{
display:inline-block;
list-style:none:none;
}
.nav li a {
padding:15px 25px 15px 25px;
color:#fff;
text-decoration:none;
display:block
}
.nav li a:hover{
border-bottom:2px solid #FFF
}
.call{
background:#df6b5e;
border-radius:50px
}
.call a{
font-weight:bold;
padding:15px 25px 15px 25px !important
}
.call a:hover{
border:none !important
}
I think problem is with top div (img-bg-container) because in css I have given height 100% & it's child div max:height:768px. Though problem solves if I keep min height instead max height in aspx page but How come it shows diiferent output when codes are same..
Do one thing. Right click on page and and select inspect element. and check both the page html and css. It will be easy to compare and find which css is not working.
Also check the form tag css as we place form tag above all HTML tags and inside body tag in asp.net. Usually HTML page do not have such structure. check and let me know.
I've created a rollover image menu in Dreamweaver. The days of the week are images. So is the rollover image that appears on hover. My problem is when you hover over the days of the week, the hover image pushes the text down.
I've mocked together two screen grabs showing the menu before and during it's hover (http://static.tumblr.com/2wdsnoc/FbPmx6mez/hover-example.png)
I read about z-indexes and tried making the menu have a greater number than the hover but that hasn't worked, nor did it help making the position fixed. In the end this is the only CSS I have styling the menu -
== CSS ==
#nav {
text-align:center;
list-style: none;
}
#nav ul
{
list-style-type:none;
}
#nav li
{
display:inline;
text-decoration:none;
}
Here is the JSfiddle with the full javascript, html and css I've shown just one category for ease.
Thank you in advance!!
Using Javacript is overkill for what you're trying to accomplish, just use a sprite image, and manage the rest via CSS
JSFiddle Demo
HTML:
<ul>
<li class="home">Home</li>
</ul>
CSS
ul { float:left}
ul li { float:left; list-style:none; }
ul a { display:block; text-indent:-9999em; }
ul li.home { width:100px; height:50px; }
ul li.home a { background:url(http://placehold.it/100x100) no-repeat 0 0 }
ul li.home a:hover { background-position:0 -50px; }
Try this http://jsfiddle.net/r2FF7/18/
#nav li a img{
vertical-align:bottom;
}
Full page on: http://jsfiddle.net/r2FF7/18/show/
I am building a navbar. This is what I want;
change the background-color on the link when hoover over it.
first and last link background should have round corners.
The problem is that either all links get rounded corner or none does!
CSS
nav {
width:100%;
line-height:2;
}
nav ul {
list-style:none;
}
nav li a {
text-decoration:none;
color:white;
float:left;
width:90px;
display:block;
background-color:blue;
padding-left:10px;
}
nav li a:first-child {
border-radius:5px;
}
nav li a:last-child {
border-radius:5px;
}
nav li a:hover {
color:blue;
background-color:white;
}
HTML
<nav>
<ul>
<li>Hem
</li>
<li>om oss
</li>
<li>hitta hit
</li>
<li>Kontakta
</li>
</ul>
</nav>
What you are looking for is something like this?
http://jsfiddle.net/gespinha/mkDWj/2/
You should trigger the a within the first and last li, not the first and last a within an li element, because all li only have one a (which is automatically its own first and last.
You other issue was that you were assigning all borders to have the same radius, when you just want the edge borders to have a radius value.
CSS
nav li:first-child a {
border-radius:5px 0 0 5px;
}
nav li:last-child a {
border-radius:0 5px 5px 0;
}
For more detailed information on the border-radius attribute check this documentation http://www.w3schools.com/cssref/css3_pr_border-radius.asp
I have a CSS drop down that appears on either mouse over or keyboard focus, and though the drop down is accessible with the mouse, when you try to access it with the keyboard the the drop down vanishes (but you still cycle through the items).
Anyone have some ideas on how to keep the drop down visible when accessing the drop down menu items with the keyboard? The CSS code is below.
You can access a demo at: http://testingtesting1.info/joomla-test/
the HTML code is generated by Joomla.
/* Parent menu items */
.h-nav {
width:720px;
height:90px;
}
.h-nav ul {
left:0;
}
.h-nav li {
display:block;
list-style:none;
position:relative;
float:left;
margin-right:10px;
}
.h-nav a {
display:block;
padding:33px 24px;
margin:0;
float:left;
}
.h-nav li a:hover,
.h-nav li a:focus {
background-color:#ffbb58;
}
.h-nav li.parent {
background:url("../../images/standard/arrow-down.png")no-repeat right;
}
/* Sub menu links */
.h-nav li li a {
text-align:left;
}
.h-nav li li a:hover,
.h-nav li li a:focus {
text-decoration:underline;
background-color:transparent; /* hide the background-color:#ffbb58 */
}
/* 1st Sub menu dropdown */
.h-nav li.parent ul.nav-child {
margin:4px auto;
position:absolute;
margin-left:-9999%; /* using margin-left instead of display:none; because display isn't read by screen readers */
text-align:left;
padding:10px 5px;
width:220px;
background:url("../../images/standard/bg-submenu.png") repeat;
z-index:9999;
/*rounded corners - rounding only bottom corners */
border-bottom-right-radius:10px 10px;
border-bottom-left-radius:10px 10px;
-moz-border-bottom-right-radius:10px 10px;
-webkit-border-bottom-left-radius:10px 10px;
}
/* keeps the drop down visible when hovering over parent menu */
.h-nav li.parent:hover .nav-child,
.h-nav li.parent a:focus + ul.nav-child {
margin:auto;
top:90px;
}
/* Resize the padding for the drop down menu items */
.h-nav li li a {
display:block;
padding:2px 25px;
}
If you don't have the ability to access the html and manually add a tabindex, or it is dynamically generated every time, you can use Javascript to add a tabindex to the li elements (this is with jQuery):
$(document).ready(function(){
$('.h-nav>li').attr('tabindex',0);
});
or regular Javascript:
window.onload=function(){
menu = document.getElementById("h-nav")
navElems = menu.getElementsByTagName('li');
for(e = 0; e < navElems.length; e++){
if(navElems[e].parentNode == menu){
navElems[e].tabIndex = 0;
}
}
}
If you can't add a tabindex, I don't believe there is any other way to focus on the li
EDIT 9/21/13
This is not perfect, but it would be usable for keyboard only.
JS Fiddle
For it to work, you can't have a sub-ul that contains the li's with anchors; the anchors must be siblings. This solution uses the ~ selector, which unfortunately only applies to siblings after the targeted element, so it makes the anchors before the focused one disapear.
I have a pure CSS implementation of horizontal menus that works fine on browsers on a computer. The website is www.intercessionsp.org. However, on touch devices (specifically, I have tried Safari on iPad and iPhone), the menus do not work. Touching them causes no response at all, if there is a submenu (the Home menu item works fine). I have tried to implement two solutions:
1. using onclick="return true", based on terraling's solution in "iPad/iPhone Touch Event on Hover CSS" question here on stackoverflow.
2. adding #ios ul { display: none; } and #ios li:hover ul { display: block; } based on a post by Philip Renich on elfboy.com called "Making CSS Drop Down Menus Work on the iPhone".
Neither worked.
Here is the relevant part of my css file:
/* horizontal menus */
#nav, .nav, #nav .nav li {
margin:0px;
padding:0px;
}
#nav li {
float:left;
display:inline;
cursor:pointer;
list-style:none;
padding:10px 30px 10px 30px;
border:1px #000 solid;
position:relative;
background: #990000;
}
#nav li ul.first {
left:-1px;
top:100%;
}
li, li a {
color:#fff;
text-decoration:none;
}
#nav .nav li {
width:100%;
text-indent:10px;
line-height:30px;
margin-right:10px;
border-top:1px #000 solid;
border-bottom:1px #000 solid;
border-left:none;
border-right:none;
background:#990000;
onclick="return true"
}
#nav li a {
display:block;
width:inherit;
height:inherit;
}
ul.nav {
display:none;
}
#nav li:hover > a, #nav li:hover {
color:#990000;
background:#fff;
}
li:hover > .nav {
display:block;
position:absolute;
width:200px;
top:-2px;
left:30%;
z-index:1000;
border:1px #000 solid;
}
li:hover {
position:relative;
z-index:2000;
}
#basic li {
color:#000;
}
Since I already have display:block in my li:hover > .nav, I tried adding it to #nav li:hover > a, #nav li:hover (without expecting this one to work) and to li:hover, but neither worked. I should add that I looked at Renich's comment about setting a width value, but since I already had width values set, this didn't appear to be useful.
I would like to stay with a pure CSS implementation.
Your menu relies on the css selector :hover in order to show the list items. In order for those to show on a mobile device like an iphone the user must be able to click. You can try wrapping the text on the first level on your menu with <a> tags. For example: About Us
View this on a mobile device:
http://jsfiddle.net/tlaverdure/L42AE/