CSS Dropdown Menu on iPad -


I have a CSS drop-down menu which works perfectly on mouse hover, but it is only partially Works on iPad & amp; IPhone - Phone Tapping on the drop down works for the first time, but fails to tap on the tap until the home link is taped, which reset the menu. I feel awkward but maybe someone will accept this behavior. Menu 

  & lt; Div id = "menu" & gt; Can be seen on. & Lt; Ul & gt; & Lt; Li & gt; & Lt; One class = "link" href = "http://raleighfutbol4all.com" & gt; Home & lt; / A & gt; & Lt; / li & gt; & Lt; Li & gt; & Lt; One class = "sm_parent" onClick = "return true" & gt; Program & lt; / A & gt; & Lt; Ul & gt; & Lt; Li & gt; & Lt; One class = "link" href = "/ program.php" & gt; Methods & lt; / A & gt; & Lt; / li & gt; & Lt; Li & gt; & Lt; One class = "link" href = "/ schedule.php" & gt; Schedule & lt; / A & gt; & Lt; / li & gt; & Lt; Li & gt; & Lt; One class = "link" href = "locations.php" & gt; Location & lt; / A & gt; & Lt; / li & gt; & Lt; Li & gt; & Lt; One class = "link" href = "reading.php" & gt; Reading & lt; / A & gt; & Lt; / li & gt; & Lt; / Ul & gt; & Lt; / li & gt; & Lt; Li & gt; & Lt; A class = "link" class = "titlebar" href = "contact.php" & gt; Contact & lt; / A & gt; & Lt; / li & gt; & Lt; Li & gt; & Lt; One square = "sm_parent" onClick = "return true" & gt; About & lt; / A & gt; & Lt; Ul & gt; & Lt; Li & gt; & Lt; One class = "link" href = "/ about.php" & gt; Coach & lt; / A & gt; & Lt; / li & gt; & Lt; Li & gt; & Lt; One class = "link" href = "/ mission.php" & gt; Mission Statement & lt; / A & gt; & Lt; / li & gt; & Lt; Li & gt; & Lt; One class = "link" href = "/ testimonials.php" & gt; Testimonials & lt; / A & gt; & Lt; / li & gt; & Lt; Li & gt; & Lt; One class = "link" href = "/ gallery.php" & gt; Gallery & lt; / A & gt; & Lt; / li & gt; & Lt; / Ul & gt; & Lt; / li & gt; & Lt; / Ul & gt; & Lt; / Div & gt; & Lt ;! - Menu - & gt;   
 CSS:  
  # menu {display: block; Status: Completed; White-space: nowrap; Z-index: 3; } # Menu a.link:hover {color: #ffffff; Border: 1 px solid # FFE135; Range radius: 6px; Margin: 0 px; / * 1px is required to offset the limit * / = # menu a.sm_parent: hover / * sm_parent = submenu parent, there is no link * / {cursor: default; } # Menu & gt; UL / * Top Level UL Only * / {Padding-Left: 15px; Padding-right: 15px; Margin: 0; } # Menu / ul * * of all ul * / {display: inline-table; Status: Relative; List style: none; Z-index: 3; } # Menu ul li {float: left; Align text: left; } # Menu ULL a {display: block; Padding: 4px 20px; Color: # FFE135; Text-decoration: None; Margins: 1px; / * Hover will replace this with a 1px limit, the transfer stops * / z-index: 3; } # Menu ULL: link {color: # FFE135; } #menu ul li a: visited {color: # FFE135; } #Menu ULL: Active {color: # FFE135;} #MenuUl: Hover> Ul {visibility: visible; Opacity: 1.0; } #MenuUlLUlVision: hidden; Opacity: 0.0; -Widk-Infection: All 0.4 S-in-Out 0.0S; -Mozy-infection: all 0.4 S-in-out 0.0S; -MMS transition: all 0.4 s easily 0.0s; -O-Infection: All 0.4 S-in-Out 0.0S; Transition: All 0.4 s easily 0.0s; } # Menu ul ul {display: block; Background: black; Boundary-radius: 8px; Padding: 2px 8px; Status: Completed; Z-index: 3; / * Top: works with 100% chrome, etc., but not with IE, (of course), but with margin and or border values, margin & amp; Limit values ​​between top menu (UL) and submenu (UL) will require more% value reduction * / top: 88%; } # MenuUl ul li {display: block; Status: Relative; Float: None; } # Menu ul ul & gt; Li (/) submenu with a little font * / font-size: 90%; } # Menu ul ul li {padding: 4px 10px; } # Menu UL UL UL / / second generation submenu open to claim of 1 generation dropdown submenus * / status: absolute; Left: 100%; Top: 0; } # Menu ul ul ul & gt; Lea stops the second generation & gt; Patterns of the subcontinent are ever decreasing * / font-size: 100%; }   
 
 
 At first I saw that the website is not responsive. Most time drop down is not good for mobile devices like iPod, iPad and Android mobile but if you can create a responsive website with the menu you can get a very good touch-friendly user experience.  
 Example Mobile Navigation Here:

Comments

Post a Comment

Popular posts from this blog

Verilog Error: output or inout port "Q" must be connected to a structural net expression -

I get the error every time, I try to compile. I'm not sure why anyone can help is? I'm new to verilog. Module D_FF (clerk, d, reset_n, q); Input D, Clack, reset_en; Output Q; reg Q; lab4_gdl f1 (.lk (~ clk), d (d), .q.m (qm)); lab4_GDL f2 (.Clk (Clk), D (QM), .Q (Q)); Always start at @ (posedge clk, neggeous reset_n) (Reset_n == 0) Q & lt; = 0; Other questions & lt; = D; Edit End: The problem is what we are asking to do: In this section, you apply the memory / registration circuit on the AlterEdie 2 board. will do. The circuit has the following specifications: The present value of swift SW15-0 on the D2 board should be shown in four hexadecimal four sections of HEX3-0. This part of the circuit will be combination logic. To use an active-less asynchronous reset and KEY1 to use KEY0 as the clock input, you must store SW15-0in in a 16-bit register in the value The register should be enabled to have a 16-bit positive edge, which uses the embedded D flip-flo
Read more

jasper reports - How to center align barcode using jasperreports and barcode4j -

I use iReport 5.5.0 . How to align a barcode component to the center The relevant piece of my jrxml is below & Lt; JR: Code 128 xmlns: JR = "http://jasperreports.sourceforge.net/jasperreports/components" xsi: schemaLocation = "http://jasperreports.sourceforge.net/jasperreports/components http: //jasperreports.sourceforge Purge / xsd / components.xsd "textPosition =" bottom "& gt; & Lt; Jr: codeExpression & gt; & Lt; [CDATA [$ F {number}]] & gt; & Lt; / Jr: codeExpression & gt; & Lt; / Jr: Code 128 & gt; & Lt; / componentElement & gt; "Text" itemprop = "text"> Create a style after this, it is called "barcode", like: & lt; Style name = "barcode" fontName = "Helvetica" fONTSIZE = "10" hAlign = "center" valign = "center" /> and set the property of your barcode element to "barcode".
Read more

c# - ASP.NET MVC - Attaching an entity of type 'MODELNAME' failed because another entity of the same type already has the same primary key value -

In brief, the wrapper module is inserted during posting and the status of an entry is changed to 'modified' . Before changing the state, the state is set to 'separate', but calling attachments () causes the same error to be thrown away. I am using EF 6. Model / wrapper class public class avi model {public A is a {get; Set; } Public listing & lt; B & gt; B {received; Set; } Public cc {receipt; Set; }} Administrator edit public functioning (int? id) {if (id == null) {new HttpStatusCodeResult (HttpStatusCode.BadRequest); } If (! Conveyor Access (id.Value)) new HTTPTitus code result (HTTP status code. Forbidden); Var aViewModel = new AViewModel (); aViewModel.A = db.As.Find (id); If (aViewModel.Receipt == zero) {return HttpNotFound (); } aViewModel.b = db.Bs.Where (x => x.aid == id.Value) .Oolist (); AViewModel.Vendor = db.Cs.Where (x => x.cid == aViewModel.a.cID) .FirstOrDefault (); See Return (aViewModel); } [HTPFost] [Valid AntitiferousTeacon
Read more