Okay hi guys and girls.
I am looking to create a drop down box from a header, i want it to be custom i.e. a drawing. I am just not 100% sure how to go about it, I have an idea of making a basic div with links for the drop down box and making it display empty until i click on a link making the css of the div style display to inline,
I was just wondering if there is a better way to go about it? i also want the drop box to slide in from top to bottom and not just appear.
Any help will be great!
Thanks :)
Related
I'm creating a website where I want a div box at bottom of the page which is just a little exposed with a title of what it has inside it like say 'More about this place' and that contains options like nearby places, ratings, reviews, etc but that is not exposed and is inside the div container..
I want that box to slide out from bottom to top when someone selects(holds) that and swipe up!
And hide again back to it position when someone swipes that down.
How can I achieve this with Js/jQuery, css, html? Please help me with the code or the working behind it!
Reference: Similar like the "Explore Nearby" box of Google Map App!
You could try using a library such as Hammer.JS or check out this answer if you don't want to depend on third-party solutions.
this is the website I am trying to set up: http://koralhassan.com
I have adjusted the template to make the CV section a hover-dropdown section. However, when I scroll down, the dropdown menu no longer appears when hovering. I am trying to find a way to either make the it appear, or make the dropdown expand to the right of the CV section instead of below it (which I think would also solve the problem). I have very little programming knowledge so please don't throw me in the deep end. Thank you!
Your class .w3-bar has property overflow: hidden.
Remove it and it should be fine.
I don't know if this is possible. Is there any way to make a div element visible while the div is not displayed? Specifically I'm using drag and drop items from a drop-down list, and once the list closes, they're invisible. Ideas?
use the Jquery UI drag samples, can help you for what you want.
I'm trying to replicate the navigation as seen in www.accenture.com
And this is what I've been able to achieve so far: http://alfadesigntech.com/new/pages/inside-page-template.html
I've used a java script to show/hide a drop-down menu which is actually a hidden div with more links. The problem is as soon as I leave the menu button, the drop-down menu hides again. While I can use a delay onmouseout, it is not the solution i'm looking for.
Possible solution as per my limited knowledge, is to somehow extend the hover area to cover the hidden box. How can I achieve this? Is there an alternate solution?
Any help will be hugely appreciated.. Thanks in advance..
Ps. I've a limited knowledge of javascripts.
you can place your div with links in one container with its triggering anchor - it should help.
<div id="menu-item-1" onmouseover=....>
<img/>
<div class="links">Show us on mouseover and hide on mouseout</div>
</div>
Although it often depends on particular markup.
Also possible solution - when links panel is open - you hide it if mouse out of it and mouse not over on anchor image.
I am creating a search box form, but I would like to give the user the option of selecting certain categories from a large collection (say 300+). This would not work very well for a drop down menu, in my opinion.
I was wondering if you could create a pop up box with the background greyed out, like you do with images and have all the categories displayed horizontally as radio boxes and then the user could select one or more of the categories and return to the rest of the form.
I suppose I could use a hidden DIV, but the impact of a popup box would be preferable to me.
Anyone any guidance as to whether this is possible.
Thanks
Here is the solution.I just implemented it to show that it is possible. http://jsfiddle.net/raynesax/u9Ywu/
You can accomplish this easily with JQueryUI dialog functionality.