Jump to content

Touchscreen css/jquery for iphone/ipad


Cobra23

Recommended Posts

Hi Guys,

 

I have a navigation menu that works great on a desktop however on a mobile or touch screen device the navigation menu doesn't seem to pause when i click on the drop down menu. Any help with a solution to this?

 

index.php with menu

<div class="header">
    <div class="nav">
        <ul class="drop-menu">
            <li><a class="first current" href="#"><span class="first-border-left"> </span>home</a></li>
            <li><a href="#" title="About Us">about us</a>
                <ul>
                    <li><a href="#" title="Latest News">Latest News</a></li>
                    <li><a href="#" title="Why choose us">Why choose us</a></li>
                    <li class="end"><a href="#" title="Mission Statement">Mission Statement</a></li>
                </ul>
            </li>
            <li><a class="last" href="#" title="Contact Us"><span class="first-border-right"> </span>Contact Us</a></li>
        </ul>
    </div>
</div>

css file

.header .nav {min-height:58px; position:absolute; top:193px; z-index:6;}
.drop-menu {
	margin:0 0 0 0px;
	padding:0 0 0 0px;
	list-style: none;
	width:940px;
	font-size:14px;
	line-height:58px;
	text-transform:uppercase;
}
.drop-menu li a {
	text-decoration:none;
	color:#fff;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	width:146px;
	text-align:center;
	display:block;
	border-right:1px solid #616161;
	background:url(menu-tail.gif) 0 0 repeat-x #0c2362;
}
.drop-menu li a:hover  {
	color:#fff;
	background:url(menu-hover.gif) 0 0 repeat-x #0c2362;
}
.drop-menu li.dropHover a {
	background:url(menu-hover.gif) 0 0 repeat-x #0c2362;
}
.drop-menu a.current {
	color:#3e3e3e;
	background:url(menu-active.png) 0 0 repeat-x #d8d6d6;
	border-top:none;
}
.drop-menu li.dropHover a.current {
	color:#3e3e3e;
	background:url(menu-active.png) 0 0 repeat-x #d8d6d6;
}
.drop-menu ul {
	position: absolute;
	top: -999em;
	background:url(submenu-tail.png) 0 0 repeat !important;
}
.drop-menu ul li {
	width:	100%;
}
.drop-menu li:hover {
	visibility:		inherit;
}
.drop-menu li {
	position:	relative;
	background:none;
	float:left;
	line-height:58px;
	height:58px;
}
.drop-menu li li {
	font-size:12px;
	height:40px;
	line-height:40px;
	background:url(menu-spacer.gif) center bottom no-repeat;
}
.drop-menu li .end {
	border:none;
	background:none;
}
.drop-menu li li a {
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-weight:bold;
	color:#fff;
	line-height:40px;
	height:40px;
	width:188px;
	overflow:hidden;
	display:block;
	border:none;
	background:none !important;
}
.drop-menu li li li {
	height:34px;
	line-height:34px;
}
.drop-menu li li a:hover, .drop-menu li li.dropHover a {
	color:#038ee7;
}
.drop-menu li li li a {
	height:34px; 
	width:200px;
	font-size:12px;
	padding:0; 
	margin:0; 
	color:#fff !important;
	text-align:center;
	line-height:34px;
	border:none;
	background:url(menu-spacer.gif) center bottom no-repeat;
}
.drop-menu li li li a:hover {
	color:#038ee7 !important;
}
.drop-menu li li li li {
	height:34px;
	line-height:34px;
}
.drop-menu li li li li a {
	height:34px; 
	width:200px;
	font-size:12px;
	padding:0; 
	margin:0; 
	color:#0c2362 !important;
	text-align:center;
	line-height:34px;
	border:none;
	background:url(menu-spacer.gif) center bottom no-repeat;
}
.drop-menu li li li li a:hover {
	color:#038ee7 !important;
}
.drop-menu a {
	display:		block;
	position:		relative;
}
.drop-menu li:hover ul,
.drop-menu li.dropHover ul {
	left:			-1px;
	top:			58px;
	z-index:		99;
}
ul.drop-menu li:hover li ul,
ul.drop-menu li.dropHover li ul {
	top:			-999em;
}
ul.drop-menu li li:hover ul,
ul.drop-menu li li.dropHover ul {
	left:			188px;
	top:			0;
}
ul.drop-menu li li:hover li ul,
ul.drop-menu li li.dropHover li ul {
	top:			-999em;
}
.drop-menu .first {
	width:84px;
	border-right:1px solid #616161;
	position:relative;
}
.drop-menu .first span.first-border-left {
	width:6px;
	height:58px;
	float:left;
	background: url(nav_left.png) top left no-repeat; 
}
.drop-menu .last span.first-border-right {
	width:6px;
	height:58px;
	float:right;
	background: url(nav_right.png) top right no-repeat; 
}
.drop-menu .last {
	width:120px;
	border-right:none; 
	position:relative;
}
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.