www.webdeveloper.com
Results 1 to 7 of 7

Thread: DropDown Menu error

  1. #1
    Join Date
    Jul 2013
    Posts
    29

    DropDown Menu error

    Hiya all,

    Need a clear head to have a look at the following code.

    I am trying to touch up on my drop down list designs but would like to still use Javascript/Jquery on the drop down functions for flexibility and backwards compatibility.

    Therefore, I have created the html and added onmoouseover and onmouseout events to the needed <li> tags.

    http://jsfiddle.net/egnab/95/

    As a sub note, this is all created in PHP and, therefore, the slightly weird keys being used in the events are so as the PHP object parameters can be flexible.

    Problem: As you will see the Mouseout event is being ... buggy. Am I wrong in thinking that child events should not fire off the mouseout event?

    Any ideas or education would be great. thanks!

    ps: I have posted this in the HTML section due to the fact that i'm guessing the problem lies with the HTML structure. If this is not the case, admins feel free to move this to the js area.

  2. #2
    Join Date
    May 2014
    Posts
    905
    Really what you have here is an example of why good developers abandoned JavaScript for menu effects a decade ago, even when still using JS for the behavior itself -- and why today the only reason to throw scripting at it is for supporting IE6/earlier or to deal with that CSS3 doesn't support height:auto on a transform. (which can also be sidestepped with an extra DIV). This is apparent in your endless classes for nothing, ID for nothing, paragraphs around non-paragraph text, sloppy use of onevent attributes, general "inheritance / child selectors, what's that?", all combined to bloat out your markup to two or three times the necessary size; though entirely what I expect when I see the bloated train wreck known as jQuery involved in the process.

    NOT that I believe in putting dropdown menus on websites anymore with mobile/responsive design on the table; conventional drilldown-navigation (where sub pages have links to deeper subpages) is something that SHOULD be coded in there in the first place -- but if you insist on making the site hard to use and creating link-overload, I would suggest tossing the mess of scripting, and instead build a pure CSS3 menu adding something like PeterNed's csshover3.htc file for IE6/earlier.
    Java is to JavaScript as Ham is to Hamburger.

  3. #3
    Join Date
    Jul 2013
    Posts
    29
    Hi deathshadow,

    Although my activity on this forum is very much a case of - something is not working ... a few attempts later and most likely hours of trying and fiddling, okay that's enough ... okay that's enough - ill post on webdev and see if someone can figure it out and ( much more importantly) explain to me what was going wrong, I find it impossible to do this as now I find the first person to answer my posts to be yourself.

    Now, when I do take from the forum and (although I will have a look to see if I can answer anything), being a very young developer whom is not actually working in the industry yet, there is little I can post, or feel 100% sure enough to make a statement in someone else's post. Therefore, I have little write to ask anything on anyone on the forum.

    Be that as it may, however, I find myself sitting there thinking "o another 'good developer' rant is coming from deathshadow" when i see the email come through. I appreciate the fact that you wish to lead people on to writing and working with code in a correct manner but, frankly, looking through your posts to others and the posts you have posted to me you come across as plain rude. (Maybe you don't even realise?). People cannot learn from insults and judgementally, especially when you give little help on actually how you would go about doing the things you suggest.

    Yes, this code is not the best I will ever right but in my 2 years of writing code ... well i have improved to say the least.

    In the future, please answer the question that people post and THEN go on to say how you would do it (or not as the case may be) seeing as i still don't know why this is actually doing the problem and i also am aware that it is not the js doing the problem. I wanted to use javascript as I said, however, CSS3 was my next port-of-call after this didn't work. it suffered the same issue (Be it from the fact that i am relativity new to CSS3 functions or not).

  4. #4
    Join Date
    May 2014
    Posts
    905
    You know, if you can find an insult in THAT... gah, I lack the words in polite company and most certainly could come up with a nice big string of insults BECAUSE of that reaction. You asked a question, and immediately go "Wah wah that's not what I wanted to hear" when someone answered you.

    But, I'm going to let that slide and still try to actually HELP YOU -- which you seem to have missed is what I was TRYING to do. You don't want actual help, maybe someone else will find it handy.

    As I was saying, you have at least DOUBLE the markup needed -- due to bad practices; that's not insulting you, that's insulting what you've been learning FROM... Things like jQuery, javascript before CSS... Lemme put it this way:

    Code:
    <ul id="mainMenu">
    	<li>
    		<a href="#" class="haskids">Tab1</a>
    		<ul>
    			<li><a href="#">Navinner1</a></li>
    			<li><a href="#">Navinner2</a></li>
    			<li><a href="#">Navinner3</a></li>
    			<li>
    				<a href="#" class="haskids">NewHeader</a>
    				<ul>
    					<li><a href="#">Navinnerinner1</a></li>
    					<li><a href="#">Navinnerinner3</a></li>
    				</ul>
    			</li>
    		</ul>
    	</li><li>
    		<a href="#" class="haskids">Tab2</a>
    		<ul>
    			<li><a href="#">Navinner1</a></li>
    			<li><a href="#">Navinner2</a></li>
    			<li><a href="#">Navinner3</a></li>
    		</ul>
    	</li><li>
    		<a href="https://#">Tab3</a>
    	</li><li class="alternate">
    		<a href="#" class="haskids">Tab4</a>
    		<ul>
    			<li><a href="#">Navinner1</a></li>
    			<li><a href="#">Navinner2</a></li>
    			<li><a href="#">Navinner3</a></li>
    			<li>
    				<a href="#" class="haskids">NewHeader</a>
    				<ul>
    					<li><a href="#">Navinnerinner1</a></li>
    					<li><a href="#">Navinnerinner2</a></li>
    					<li><a href="#">Navinnerinner3</a></li>
    				</ul>
    			</li>
    			<li><a href="#">Navinner4</a></li>
    			<li><a href="#">Navinner5</a></li>
    		</ul>
    	</li><li class="alternate last">
    		<a href="#" class="haskids">Tab5</a>
    		<ul>
    			<li><a href="#">Navinner1</a></li>
    			<li><a href="#">Navinner2</a></li>
    			<li><a href="#">Navinner3</a></li>
    			<li>
    				<a href="#" class="haskids">NewHeader</a>
    				<ul>
    					<li><a href="#">Navinnerinner1</a></li>
    					<li><a href="#">Navinnerinner3</a></li>
    				</ul>
    			</li>
    			<li><a href="#">Navinner4</a></li>
    			<li><a href="#">Navinner5</a></li>
    			<li>
    				<a href="#" class="haskids">NewHeader1</a>
    				<ul>
    					<li><a href="#">Navinnerinner3</a></li>
    				</ul>
    			</li>
    		</ul>
    	</li>
    </ul>
    All but one ID gone, the .haskids class is there just to say arrows belong on specific anchors, inheritance can be used to choose which anchors. The 'alternate' class is put on every item past "center" and just means to put the arrows and flyouts on the opposite side... and I used a 'last' class since legacy IE (the only reason to use JS on a menu in this day and age) doesn't know last-child.

    EVERYTHING is an anchor since even your top level menu items should be. This is so that if someone isn't using the mouse, or has the CSS dropdowns fail, they can still get to a page that should have the same links on it either below the menu, in a sidebar, or even just a placeholder page with just those links of need be.

    Whenever you build a menu -- or write HTML in general, you should make the page work WITHOUT scripting or CSS first. Plain, simple, functional. You then make it pretty with CSS, then further enhance it with scripting; There's even the unwritten rule of JavaScript which is "IF you can't make it work without scripting FIRST, you likely have no business adding scripting to it." -- that's not being flippant, that's a matter of fact. It's called progressive enhancement... so the page gracefully degrades if/when the fancy parts are unavailable, incompatible, or even intentionally blocked! 2.2 million noscript plugin users for example...

    The rest would all be CSS based. To keep it simply instead of a slide-in I used opacity, can made a live copy here:
    http://www.cutcodedown.com/for_other.../template.html

    As with all my examples I've done for people, the directory:
    http://www.cutcodedown.com/for_others/bVidler/

    Is wide open for easy access to the gooey bits and pieces. I threw CSShover3.htc in there which should make it work in IE6 (and maybe even 5.5), though I'm not at my workstation where I could test that right this minute.

    You'll notice in the HTML file I used XHTML 1.0, one of two latest RECOMMENDATION doctypes -- I don't believe in HTML 5, I do not advocate it's use, and if you are forced to due to things like supporting video for crApple users, design in STRICT, then slap the lip-service doctype on for deployment.

    Given the character limits here, I'll post the CSS breakdown in the next post.
    Java is to JavaScript as Ham is to Hamburger.

  5. #5
    Join Date
    May 2014
    Posts
    905
    The CSS:
    http://www.cutcodedown.com/for_other...ler/screen.css

    I always start with a reset -- there are smaller ones like the universal reset "* { margin:0; padding:0; }" but that can cause issues with INPUT, TEXTAREA and SELECT thanks to Microsoft and Mozilla inheriting behaviors from fifteen year old browsers. There are larger ones like Eric Meyer's "reset reloaded", but it's so massive and sets a whole slew of values that have nothing to do with being a "Reset" it's almost a framework; really it's resets like that which give them a bad name.

    The one I use is in the middle -- at under a quarter K it's nothing, and it just nabs the elements we might actually use and encounter issues with.

    I hide HR -- not an issue on this page, but it's force of habit.

    The text-size-adjust values are there to tell mobile browsers we know what we're doing, I put it in a media query since they aren't needed at tablet resolutions, and sending them to OSX safari can actually break zooming... which is kinda jacktarded since it doesn't break zooming on iOS. :/

    I also only include csshover3.htc for IE6/earlier using the "* html" hack. It can help with some things in IE 7 and 8, but nothign we're using right now.

    In any case, on to the menu.

    #mainMenu -- First we pull the bullets off it, then add a float wrapping behavior... one of the easiest, float + 100% width. I set the line-height again 'just to be sure' since you might make changes that could screw up the positioning.

    #mainMenu li -- the top level list items get relPo (relative positioning) so we can aPo (absolute position) elements inside it. Float'em and 20% width.

    #mainMenu .last -- you actually only need 2 to 4 px to stop the perfect width drop bug, a full EM is overkill.

    #mainMenu li:hover -- color change for hover state, yawn.

    #mainMenu a -- these too get relative positioning since we'll have some generated content in there. We have to float them instead of display:block or we'll have a nasty bug in IE8 called the "staircase effect" -- PITA. With the center alignment I don't try to pad the sides, since that 20% parent width could be a problem. Real shame we can't reliably display:block these.

    #mainMenu li ul -- the nested UL also get bullets stripped, and I apo them at the proper height to appear below their parent, but way off screen to the left. Setting their width has to be done for legacy IE. (which also sucks)

    #mainMenu li ul -- 0 opacity for our fade-in animation. The transition code we only now need the -webkit since mozilla has dropped prefixes as of FF23... sadly we'll probably have to say -webkit for the next decade now that Google has forked webkit off into "blink", making Safari development seemingly grind to a complete halt. The values we declare here are for when the element is unhovered, so with 'left' we want to wait half a second, then instantly show it, hence "0 0.5s". The opacity we want to start immediately.

    #mainMenu li:hover ul -- we place it left 0, which makes it show on the screen. The 1 opacity will fade in over a second, and on hover we want that left to appear instantly, hence the 'left 0'.

    #mainMenu li li, #mainMenu li li a -- on the nested list items, we don't want them floated, we want them block and auto-width. Look, no extra classes needed to target the children, just unset the things you don't want set.

    #mainMenu li li a -- though we do want some extra padding on the nested anchors.

    #mainMenu li li ul -- we want them to have top alignment of 0 always. I state this without the hover as doing it on the hover can have... unexpected results.

    #mainMenu li:hover li ul -- when the parent LI is hovered but the child LI isn't, we want to make sure the child is still offscreen with the right opacity and transition. Otherwise the parent's hover would target the children too. There is the 'child selector' (greater than sign) but that doesn't work in IE7/earlier, and I wrote this for compatibility.

    #mainMenu li li:hover ul -- when the child LI is hovered though, we want it visible -- child items slid left 100% will appear to the right of the parent.

    #mainMenu li.alternate li:hover ul -- though with the alternate ones, we want them left:-100% so they are on the left instead of the right.

    #mainMenu .haskids:after -- I use generated content and unicode characters for the down arrows.

    #mainMenu ul .haskids:after -- the ones in the dropdown I absolute position, so be careful about making item text too long as it could overlap. (if that's an issue, you might want to pad the anchor an extra EM left/right.). I have to use left:100% as you can't undo right positioning properly cross-browser, so I use a negative left margin to slide it where it should be.

    #mainMenu li.alternate ul .haskids:after -- the alternate ones just get pushed in half an EM with the arrow pointing the other way.

    ... and that's the CSS to make it work.

    The transitions and animations -- some of which actually makes it easier to use -- of course won't work in IE9 and earlier... OH WELL. Seriously, if people can't be bothered to update free software, I'm not going to cry over them not getting goofy animations; the menu will still WORK in legacy browsers -- close enough!

    Hope this helps.
    Last edited by deathshadow; 06-23-2014 at 09:57 PM.
    Java is to JavaScript as Ham is to Hamburger.

  6. #6
    Join Date
    May 2014
    Posts
    905
    Oops, minor goof, I forgot to add this to the :after

    font-family:"segoe ui symbol","lastresort","dejavu sans",freesans,"lucida sans unicode",sans-serif;

    Not all browser engines are equal; Webkit browsers are too stupid to say "hey, if the character doesn't exist, use a character set where it does" -- unlike FF, REAL Opera (instead of the pathetic crippleware that is ChrOpera) and even IE... thankfully there are a number of fonts we can pretty much be sure will exist across most targets that do have the unicode "geometic shapes" code block.

    http://www.fileformat.info/info/unic...s/utf8test.htm

    In case your not familiar with it. Increasingly we can use unicode characters instead of graphics for simple things.
    Java is to JavaScript as Ham is to Hamburger.

  7. #7
    Join Date
    Jul 2013
    Posts
    29
    Hi Deathshadow,

    A much better answer, many thanks.

    From that massive reply I can learn a lot.

    Please make no mistake, I have no problem with getting replies that are going to tell me straight what is wrong. heck, I greatly prefer it, it is just the manner in which you have done before to myself and others that got my back up.

    With my code I tend to find myself trying to make things harder than they need to be (ie - using js instead of css) but this is because I am trying to challenge myself and get to that stage when Its beyond me and I can log on here and shout out for help. Bad practise? well if this was my actual work then yer! But Im not yet so im trying to do, what might even be seen as stupid, projects like this in an attempt to broaden my knowledge.

    Again, thank you for the hearty reply, I will look forward to re-engineer this tonight and create my own version of it.

    ps: the width is done by the PHP array, its not statically 20% its just 100/array(count). mathematically padding can be added to this.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles