Databases
StackOverflow2013
Postsdbo
POSliding bottom panel through HTML, CSS and JS
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POSliding bottom panel through HTML, CSS and JS
    text
    copied!<p>I'm trying to make a menu that will slide from the bottom of the page on hover. I have already achieved the sliding effect, and my div already sits at the bottom of the screen, with the top 40px showing so you can hover on it to activate the sliding effect. The problem is that the div is not "fixed" and it doesn't scroll with the page. I think a little JS would be the best solution</p> <p>Here is my HTML:</p> <pre><code>&lt;div id="floatingmenu"&gt; &lt;div id="listcontainer"&gt; &lt;ul class="floatingcolumn"&gt; &lt;li&gt;Link 1&lt;/li&gt; &lt;/ul&gt; &lt;ul class="floatingcolumn"&gt; &lt;li&gt;Link 2&lt;/li&gt; &lt;/ul&gt; &lt;ul class="floatingcolumn"&gt; &lt;li&gt;Link 3&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>And here's the CSS:</p> <pre><code>#floatingmenu { width:100%; height:320px; position:absolute; bottom:-300px; z-index:99999; background:#000; -webkit-transition: all 700ms ease; -moz-transition: all 700ms ease; -ms-transition: all 700ms ease; -o-transition: all 700ms ease; transition: all 700ms ease; } #floatingmenu:hover { bottom:0px; -webkit-transition: all 700ms ease; -moz-transition: all 700ms ease; -ms-transition: all 700ms ease; -o-transition: all 700ms ease; transition: all 700ms ease; } #listcontainer { position:relative; width:900px; margin-left:auto; margin-right: auto; } #listcontainer ul { width:290px; float:left; color:FFF; } </code></pre> <p>You can see it in action here:</p> <p><a href="http://jsfiddle.net/fn6t7/" rel="nofollow">http://jsfiddle.net/fn6t7/</a></p> <p>Any help would be greatly appreciated.</p> <p>Thanks!</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload