SlidingPanel: Adding a push from the top example

Author: Jason Scott

css/structure/jquery.mobile.overflow.css

@@ -12,6 +12,13 @@
 	overflow-y: scroll;
 	-webkit-transform: translate3d(0,0,0);
 }
+
+.top {
+	top: -280px;
+	width: 100%;
+	height: 280px;
+}
+
 .right {
 	right: -310px;
 }
@@ -20,21 +27,23 @@
 }
 
 .ui-content .over .ui-listview {
-margin:0;
+	margin:0;
 }
 
 
 .over.left {
 	left: -300px;
 	-webkit-box-shadow: 12px 0px 25px rgba(0,0,0,.20);
-	
 }
 
 .push {
 	-webkit-transition-duration: 0.25s;
 	-webkit-animation-timing-function: ease-out;
 	z-index: 0;
 }
+.push.top {
+	top: 0;
+}
 
 .push.right {
 	right: 0;
@@ -53,11 +62,17 @@ margin:0;
 
 .showTabOverflow,
 .ui-mobile [data-role="page"].showTabOverflow, .ui-page.showTabOverflow{
-	left: 280px !important;
+	left: 280px;
 }
 .showTabOverflow.right,
 .ui-mobile [data-role="page"].showTabOverflow.right, .ui-page.showTabOverflow.right{
-	left: -280px !important;
+	left: -280px;
+}
+
+.showTabOverflow.top,
+.ui-mobile [data-role="page"].showTabOverflow.top, .ui-page.showTabOverflow.top{
+	top: 280px;
+	left: 0;
 }
 
 .showMenu.right {

docs/content/content-overflow.html

@@ -48,13 +48,48 @@ <h1>Collapsible set</h1>
 		<h3>Push panel</h3>
 		<button onclick="openLP()" data-inline="true" >Left</button>
 		<button onclick="openRP()" data-inline="true">Right</button>
+		<button onclick="openUP()" data-inline="true">Up</button>
 		<br />
 		<h3>Overlay panel</h3>
 		<button onclick="openLO()" data-inline="true">Left</button>
 		<button onclick="openRO()" data-inline="true">Right</button>
+		<p>
+		Pellentesque, penatibus sagittis magna odio lundium, facilisis pellentesque nisi proin? Elementum tincidunt urna eu, etiam ac, porttitor sed, et eros non! Aliquet. Sed massa porta! In porttitor, tincidunt, nascetur. Urna, purus mid turpis cursus? Tortor purus, diam vut sit, magna in dis sociis eu elementum magna tincidunt nec, cursus dapibus cum, amet nisi augue? Hac, non ridiculus penatibus habitasse mauris, nec vut a sagittis! Et integer? Sit habitasse porta amet, turpis velit enim eu magnis nascetur cursus ut? In ultrices. Sed vel proin, etiam? Integer mauris. Eu. Vel arcu turpis, pid tempor rhoncus, habitasse nec augue, tristique, magnis et in ac rhoncus a dis adipiscing? Tortor ac turpis ut. Cum massa egestas, massa odio nunc massa augue auctor lundium etiam, sociis nec purus rhoncus. Cras cursus, tempor ut enim amet. Rhoncus duis, est a montes, habitasse tempor ac sociis, dapibus? Aliquet mauris duis et dapibus, porta, adipiscing. Risus eros! Eros, dolor! Adipiscing odio augue placerat cum turpis hac integer augue platea pid! Elit diam ridiculus dignissim odio urna ut dolor, scelerisque, sit etiam augue odio, sit, ut dolor dapibus ac in parturient sagittis nisi magna elementum platea eu et augue! Facilisis pid! Porta auctor enim platea, urna montes vut hac? Duis, cum magna nec! A cum amet sagittis? Magna. Cras enim magna, enim, porta, ac vut. Habitasse mus in vut lundium quis. Vut in proin. Ac egestas mauris sit, cras pid, non tortor eu sit augue, porta penatibus et facilisis nisi lorem nec, auctor sagittis lundium porta hac integer porta proin, mid? Enim nec? Diam, phasellus purus tristique, rhoncus, massa magna, est porta. Rhoncus magna penatibus aliquam non. Dis enim? Magna, est placerat, pid sagittis magna. Pid et in dolor, dapibus risus ac porttitor lectus montes vut natoque. Sagittis ultrices sagittis. A eros sit? Pid velit aenean non mid a urna a aliquet nisi, amet odio. Sed cursus nisi ut cursus in, egestas elementum penatibus facilisis et massa nisi phasellus, est. Pid, dapibus penatibus! Eros sed sagittis tincidunt natoque, porttitor! Integer in dolor purus tortor pulvinar, nunc habitasse nisi tincidunt tortor tincidunt ac nisi dis tincidunt aenean pellentesque augue vel! Augue a pulvinar urna massa ac? Massa dictumst proin enim cum porttitor. Vel est, est dignissim. Aliquam egestas lacus lectus dignissim in, aenean dignissim ultrices? Pulvinar ac ridiculus, rhoncus sit! Enim aenean in dignissim, cursus amet vel odio ut pellentesque etiam, lacus? Auctor adipiscing integer amet, auctor mattis sit phasellus habitasse amet urna ultrices placerat quis risus eros? Duis ut lorem porta turpis arcu. Enim ut ac pulvinar dapibus, eu montes ac, tortor purus, tristique ultricies magna platea. Urna, augue aliquet eros, nascetur scelerisque amet tincidunt nunc porttitor sed adipiscing sit cras, sit vel rhoncus nisi mus elementum. Ultricies magna, tincidunt ridiculus, mauris, a, a vel. Elit cursus sed ridiculus pid sit, elementum, sed? Dictumst ac, pulvinar augue. Facilisis montes, elit auctor nisi non, integer eros? Magnis. Ut augue. Nunc in amet augue hac augue, urna. Sed tristique nec natoque, et cras platea? Sed! Pid ultrices? Mid sociis turpis tincidunt? Cum augue egestas mus. Porta dolor, aliquet tristique magna phasellus ultrices cum. Pellentesque porta ac nisi proin, lorem mauris scelerisque! Tincidunt risus ac enim platea, hac lorem elementum! Lundium porta, aenean et, duis et vel mid ut nisi in ultrices, est enim aliquet amet urna pid! Mauris sit elementum dis, in aliquet placerat nunc pid pulvinar arcu ac lacus, adipiscing tincidunt, scelerisque, non egestas hac diam sit quis mid hac urna magnis, sagittis cursus, a magna. Magnis dis facilisis eu amet, dapibus! Sed pid magnis risus facilisis odio, cursus porttitor, montes porta augue est, parturient pid dapibus elementum, penatibus pid vut pulvinar augue etiam? Proin purus etiam dapibus aenean et rhoncus nunc, magna ac cras penatibus, et augue in sit nec urna ut cras vel elementum nec amet a amet duis pulvinar adipiscing ac tortor scelerisque penatibus sit auctor. Vut adipiscing nascetur habitasse urna? Ac placerat turpis ac. Cras augue odio placerat proin ac sociis natoque, dignissim scelerisque mauris! Amet? Lundium dis in. Magna, augue nunc! Porttitor elementum platea scelerisque odio a magnis massa integer! Parturient! Dignissim tempor scelerisque pellentesque elit parturient natoque nunc vel augue lorem porttitor ut mid, hac sed lacus ac vut quis tortor tristique magna ridiculus ultrices turpis? Mus? Integer adipiscing! Dignissim. Turpis magna! Parturient tristique cursus a amet tempor, auctor, a? Risus elementum? Turpis tincidunt, etiam mattis lundium. Integer ut tempor. Augue lectus ac! Natoque lorem urna rhoncus placerat tincidunt nec platea vut, placerat mus et urna sed vel, vel platea ac lacus porta augue, ac porta urna. Dolor vel velit? Nec diam ac porta? Ac sit et ac! Magnis dictumst. Ac pellentesque, aliquam turpis. Sagittis, dolor quis lectus, integer et tincidunt amet magnis dis ultrices tristique a? Dis, magna vut, augue sagittis et placerat diam magna. Pulvinar dignissim lundium, ut rhoncus pulvinar! Et, magna elementum mid! Nisi turpis lectus. Ut, ridiculus tincidunt massa sed enim et auctor augue aenean ultrices montes turpis. Adipiscing ac tincidunt adipiscing. Velit aliquet a lundium scelerisque turpis? Facilisis placerat massa integer scelerisque odio cursus vut penatibus odio elit tincidunt! Vel in dignissim nascetur ut platea, vut cum, ut cum sit urna. Pulvinar nisi turpis, sagittis eu eu nunc pellentesque nec eros. Dapibus et. Dapibus. Adipiscing, eros amet, egestas, porttitor, ac cursus integer aliquet velit tincidunt et rhoncus, dictumst sit, tortor massa? Cras amet eu, augue et dolor. Proin sit dignissim, mus integer sed, dolor dis? Cursus! Mauris dolor magnis dolor pulvinar! Nisi. Scelerisque platea tempor pulvinar cum quis non mus nec, rhoncus, placerat eu tincidunt tortor elementum? Odio ridiculus? In tincidunt, diam parturient. Aenean penatibus magna, tincidunt et nisi, porttitor! Odio adipiscing? Pulvinar urna. Facilisis porta cursus, a augue, arcu turpis. Egestas, placerat! Enim adipiscing tincidunt duis dis vel! Et rhoncus tempor pid tincidunt turpis adipiscing auctor eu sed? Cursus egestas! Cursus in mid eu purus amet! Nunc, aliquet dolor ultricies dictumst ultricies, ut penatibus rhoncus porttitor tortor a ridiculus urna pellentesque nisi! Pid augue a turpis augue et. Elementum magna duis, tincidunt nunc ac ridiculus facilisis? Adipiscing lacus.
+		</p>
+
+		<div id="up" data-role="overflow" data-position="top" data-behavior="push">
+			<div data-role="navbar">
+				<ul>
+					<li><a href="#">One</a></li>
+					<li><a href="#">Two</a></li>
+					<li><a href="#">Three</a></li>
+				</ul>
+			</div><!-- /navbar -->
+			<button onclick="closeUP()" data-inline="true">Close Menu</button>
+		</div>
+
+		<div id="uo" data-role="overflow" data-position="top" data-behavior="over">
+			<div data-role="navbar">
+				<ul>
+					<li><a href="#">One</a></li>
+					<li><a href="#">Two</a></li>
+					<li><a href="#">Three</a></li>
+				</ul>
+			</div><!-- /navbar -->
+			<a href="#" onclick="closeUO()">Close menu</a>
+		</div>
+
+
+
 
 		<div id="lp" data-role="overflow" data-position="left" data-behavior="push">
-
+			<div data-role="navbar">
+				<ul>
+					<li><a href="#">One</a></li>
+					<li><a href="#">Two</a></li>
+					<li><a href="#">Three</a></li>
+				</ul>
+			</div><!-- /navbar -->
 			<ul data-role="listview" data-theme="a" data-divider-theme="a" style="margin-top:-2px;" class="nav-search">
 					<li data-icon="delete" style="background-color:#111;">
 						<a href="#" onclick="closeLP()">Close menu</a>
@@ -209,24 +244,36 @@ <h3>Overlay panel</h3>
 			function closeLP() {
 				$("#lp").overflow("hide");
 			}
-			function openLO() {
-				$("#lo").overflow("show");
-			}
-			function closeLO() {
-				$("#lo").overflow("hide");
-			}
 			function openRP() {
 				$("#rp").overflow("show");
 			}
 			function closeRP() {
 				$("#rp").overflow("hide");
 			}
+			function openUP() {
+				$("#up").overflow("show");
+			}
+			function closeUP() {
+				$("#up").overflow("hide");
+			}
+			function openLO() {
+				$("#lo").overflow("show");
+			}
+			function closeLO() {
+				$("#lo").overflow("hide");
+			}
 			function openRO() {
 				$("#ro").overflow("show");
 			}
 			function closeRO() {
 				$("#ro").overflow("hide");
 			}
+			function openUO() {
+				$("#uo").overflow("show");
+			}
+			function closeUo() {
+				$("#uo").overflow("hide");
+			}
 
 
 		</script>