I am staging my ongoing work here-
http://www.22shrutiharmonium.com/version2/index.html
Here, css dropdown menu appears at different menu tabs (and functions accurately as intended). However, once inside the "blog" section, notice the dropdown menu unnecessarily also appearing near the first menu tab, no matter where we hover the mouse over the menu. (IE7, FF3.6.9, Chrome 6.0.472.55)
Basically, I have integrated the external open source blog code into my site and have changed the original blog theme (css) with that of my site. So the dropdown menu part of the css of my site and that of the blog are same (I have copied the dropdown menu part of my css into /blog directory for customizing its css).
Thanks in advance.
To avoid headaches, I would personally recommend using CSS-only menus, if it is not too much time or effort to re-do a few lines of the CSS.
http://htmldog.com/articles/suckerfish/dropdowns/
You can ignore the sf-hover if you aren't concerned about supporting IE6. It also looks like the structure of your current navs matches that the above link, so the process should go pretty smoothly.
Related
I've build a WordPress website which runs the TouchFolio theme. This theme uses a plugin called Royal Slider to create the sliding image gallery featured on the main page.
http://www.suellewelyn.com.au/
https://dimsemenov.com/themes/touchfolio/
https://dimsemenov.com/plugins/royal-slider/
I've ran into an issue where the description overlay on the RoyalSlider plugin is staying active across different projects, which results in them becoming mislabelled.
To recreate the issue, if you load the page at http://www.suellewelyn.com.au/ the first work titled "Primal Intent" comes up. If you then use the left hand menu to jump directly to a project lower down the list ("Celebration" for example) the "Primal Intent" title and description stays active. I noticed that this is an issue with demo of the theme on the developer's website as well.
Does anyone have any suggestions as to how I might be able to correct this?
Just Increase z-index of your pseudo element with tint.
A typical wordpress menu has one menu item with a top-level target of #, going nowhere, to allow for its multiple, working submenus which do go to targeted URLs.
Philosophically, is the onus on me to visually signify to users that this top level menu item is a dead menu item, with no target, so they don't select it and wait for a change that will never come?
What design feature can or needs to be used to signify a non-working menu item which has only working submenus?
Or is it worth pondering at all?
That's an interesting thought. You could change the cursor on hover to indicate text rather than the pointer for a link.
The onus is absolutely on the designer & developer to implement proper UX. An ideal design would effectively communicate the difference between a unlinked dropdown and traditional link.
Check out how Stripe does this with their main navigation. A prominent, eye-catching dropdown appears on hover. Clicking the main, parent link closes the dropdown. Clicking again re-opens the dropdown.
I'm just starting my programming but I need help.
I built my site from wordpress template. Made a lot of customization on my own but I have trouble by creating BURGER MENU on mobile devices.
I'm not sure how I can rewrite chosen template navigation bar menu to burger. Let me know if anyone could help me.
You could do it a few different ways, but personally, it's easier to place it with javascript and hide it with css...
Usually, you would create an element with javascript and attach it to a location on your page. For the burger itself, you've got the option of using drop-shadows, three divs or the unicode character for it. You can read more about those options here: https://css-tricks.com/three-line-menu-navicon/
Finally, if you want to add animation to your menu items (for opening / closing ) here's something that you can read to understand how it's possible to achieve: https://jonsuh.com/hamburgers/
I'm looking to have a logo with a drop down menu on my site, http://sheisbiddy.com/home/ I found a widget that changes a menu item to a photo (it's just called Menu Image) that worked beautifully. Then I added another widget (Max Mega Menu) to be able to add a dropdown menu and really customize it and make my life easier (less coding! Yay!). Problem is that it overrode the other widget and now there isn't a logo. I tried using the custom css feature to add it but it still isn't working (I asked about that in a different question here: http://bit.ly/1Pj1S3e). Is there anyway to get these plugins to play nice together? Or is there a better way to get both the logo and dropdown menu? I appreciate any advice you have! This is the last step until this site is ready to go.
If its a plugin conflict, theres a good chance its because there is conflicting styles in each one, and one takes priority over the other. Finding those styles and commenting them out or deleting them might solve your issue.
In a worse situation, there could be a name conflict, but that seems doubtful here.
I am working on a project in Drupal, and I am in charge of the menus. My project manager wanted the submenus to be on the same row as the parent link? Is there anyway I can do this?
http://www.muredhawks.com/ (we wanted the menus like the one on this website
Even if I don't understand clearly your question, to achieve the result of the website you linked, you can try the Superfish module or the MegaMenu module.