Notice I said "Box" and not "Menu"...I want to create a clickable drop down box (much like the "More" button on Google's search engine, where a box drops and includes a wide horizontal block that I can include information in. I don't have access to my company's CSS though...

Here's another example.
http://lonestar.edu/northharris.htm

Near the lower right side in the "LSC-North Harris Events" Table, when you click on one of their events, a box pops up.

Can I create one of these with only HTML?

Recommended Answers

All 3 Replies

Have a look at some of the jQuery solutions in this straightforward tutorial, as some of them do roughly what you are after. You don't need to uinderstand jQuery to use the pre-made solutions presented here.

http://www.webdesignerwall.com/tutorials/jquery-tutorials-for-designers/

Alternatively, have a look at the accordian effect on any page other than the index page of the festivals site in my siggy, and then the pop-up lightbox/pop-up effect when you click on a link to any festivals site.

You can adapt the pop-up to suit your tastes - I got it from http://gettopup.com/ - see the Inline DOM example in topup's example set, I think that would suit you perfectly.

PS that's not a drop-down, it's a pop-up ;)

It is not a drop down, or a popup, it is a layer in the page something like

<script type="text/javascript">
<!--
(document.getElementById) ? dom = true : dom = false;
function hideIt(layer) {
if (dom) {document.getElementById(layer).style.visibility='hidden';}
if (document.layers) {document.layers[layer].visibility='hide';} }
function showIt() {
if (dom) {document.getElementById(layer).style.visibility='visible';}
if (document.layers) {document.layers[layer].visibility='show';} }
--></script>
<button onClick="showIt('layerm1');">Important Information</button>
<div id="layerm1" style="width:50%; visibility:hidden; padding:10px; margin:10px; background:#ececec; border: 1px solid;">
bla bla bla bla bla bla bla bla bla bla 
bla bla bla bla bla bla bla bla bla bla 
bla bla bla bla bla bla bla bla bla bla 
bla bla bla bla bla bla bla bla bla bla 
bla bla bla bla bla bla bla bla bla bla 
bla bla bla bla bla bla bla bla bla bla 
bla bla bla bla bla bla bla bla bla bla 
bla bla bla bla bla bla bla bla bla bla 
<button onClick="hideIt('layerm1');">Close</button></div>

multiple elements can be hidden/shown run on the one script just change the attribute in the buttons
the buttons can be <a href="javascript:showIt('layerm1');">s or any element that suppports onclick, I just like buttons
the hidden divs can be styled for position etc

Member Avatar for rajarajan2017

Yes as almost bob said, it is an layer, which is hide/show based on the events (triggering) we made. Infact, also mean popup but it took some little time to load, but it shows immediately because it is an layer.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.