Off-Canvas LeftResponsive Page with hidden music player widget in left sidebar

Developer
Stan Williams
Size
5,692 Kb
Views
34,408
  1. Off-Canvas LeftResponsive Page with hidden music player widget in left sidebar Previews
  2. Off-Canvas LeftResponsive Page with hidden music player widget in left sidebar HTML Codes
  3. Off-Canvas LeftResponsive Page with hidden music player widget in left sidebar CSS Codes
  4. Off-Canvas LeftResponsive Page with hidden music player widget in left sidebar JS Codes

How do I make an off-canvas leftresponsive page with hidden music player widget in left sidebar?

Responsive Page with Hidden Music Player Widget in left Sidebar. What is a off-canvas leftresponsive page with hidden music player widget in left sidebar? How do you make a off-canvas leftresponsive page with hidden music player widget in left sidebar? This script and codes were developed by Stan Williams on 08 September 2022, Thursday.

Off-Canvas LeftResponsive Page with hidden music player widget in left sidebar Previews
IQ Test

Off-Canvas LeftResponsive Page with hidden music player widget in left sidebar - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Off-Canvas LeftResponsive Page with hidden music player widget in left sidebar</title> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel='stylesheet prefetch' href='https://bradfrost.github.com/this-is-responsive/styles.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!--Pattern HTML--> <div id="pattern" class="pattern"> <!--Begin Pattern HTML-->	<div class="wrap" id="wrap"> <a href="#menu" class="menu-link"><p></p>MENU</a>	<aside class="oc" id="menu" role="navigation">
<div class="inner-border">	<p><p><iframe width="100%" height="100%" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player?url=https%3A%2F%2Fapi.soundcloud.com%2Fplaylists%2F12160617&color=000000&auto_play=false&show_artwork=true"></iframe></p></p> <p><p></p>
8 of these tracks the Peacepipe tracks, feature Outlaws and Ghostriders band guitarist Steve Grisham - engineer - mandolin and all 8 feature Ghostriders band drummer, Pug Baker on Drums. Original Music that doesn't fit neatly into most existing genres, some have a "western" sound, but all are original.
For Stan Williams getting to record an album with the legendary Outlaws band guitarist Steve Grisham and being able to meet some of his early musical icons and radio idols was a dream come true...
By age 16 Stan had joined a local top 40 band named Midnight Special and began playing shows on weekends while attending high school and working at an electronics factory in the small town nearby.
Stan went on to play with several different bands over the years, playing many types of music from Classic Rock to Bluegrass and after all these years, is finally ready pursue his dream of playing music full time.
Some of Stan's early influences were, The Ventures, Chet Atkins, Flatt and Scruggs, The Eagles, Led Zeppelin, Bob Seger, Bad Company, Foghat, Pink Floyd, Fleetwood Mac, The Outlaws, Neil Young, and Lynyrd Skynyrd, to name a few.
Peace Pipe was recorded at Mira Vista Studios and features:
Stan Williams: Composer, acoustic guitar, electric guitar, slide guitar, bass guitar, and keyboards.
Steve Grisham: Mandolin and audio engineer.
Pug Baker: Drums.
Steve Grisham is currently a member of the Outlaws Band and Blackhawk bands, toured with The Outlaws band through­out the 80's, Wrote "Fall­en Hero" for the Dis­ney/Touch­stone movie: Can't Buy Me Love, "Keepin Our Love Alive", a top 40 hit for the Hen­ry Paul Band, "The Out­law" and "La­dy Luck" for The Out­laws band, was a Staff writ­er for Ron­nie Mil­sap Mu­sic, back up gui­tarist for Razzy Bai­ley, Tom Wopat (Luke Duke / Dukes of Haz­ard), Bob­by Bare, Jean­nie C. Riley (Harp­er Val­ley PTA), Robert Nix (At­lanta Ry­thym Sec­tion), Ar­timus Pyle (Lynyrd Skynyrd) and is currently touring with the Legends of Southern Rock and the Ghost Riders bands.
Pug Baker is currently the drummer for the Ghost Riders Band and The Legends of Southern Rock band, Pug also co-wrote an al­bum with Johnathan Cain, of the band Journey, and wrote the theme song for the movie "The Ter­mi­na­tor".
Stan is currently working on new music that differs somewhat from the style of this album, and is for the most part more up tempo, electric guitar oriented songs with lyrics that tell about about the adventures of living life in the rural south, tales from the road, lessons learned, and perhaps even a love song or two.
Stan also plans to record some "beats" or experimental instrumental pieces he has composed using real instruments rather than being electronically synthesized, as well as several more new instrumental pieces which are similar to the ones on the Peace Pipe album.
The song Peace Pipe won a top ten song award in Rock Instrumental on www.Ourstage.com which is a partner of MTV.
The song Peace Pipe is also a top 10 song at Soundclick.com -and is the time of this writing number one in the Southern Rock charts there and has held the #1 spot almost continuously for several months now. Several more of Stan's songs have held number one spots in the charts there in various genres.
What fans are saying:
5 Stars from Me! Wow! You sure do write/play and perform beautiful Hits! I love your music and it's all so brilliantly composed and of the Most Excellent Caliber! You are a Unique Talent For Sure!
-Stephen Michael Minnick (Vietnam War Hero)
You have an awesome sound my friend!! The mix is great,and it's obvious you are real comfortable behind your guitar.Very smooth! Stan, you get a 5 from me!!
-Doug Reaume
Your music captures the essence of beauty Stan. Love your work. Much respect, TJ Way.
-The Soul Touchers
Provided by artist representative
</p>	<p>
</p> </div>	</aside>	<div class="lorem mod"> <p><h2>H2 Text</h2></p> <p><b>Responsive Page with Hidden Music Player Widget in left Sidebar. Click on Menu to open it.</b></p>ipsum salts dolor sit amet, consectetur adipiscing elit. Integer iaculis dignissim orci viverra venenatis. Nulla sit amet quam at nisl sagittis adipiscing in a ligula. Nam in nisi neque. Ut in ipsum eget justo dignissim accumsan a sit amet neque. Nulla facilisi. Aliquam erat volutpat. Aliquam aliquet bibendum mollis. Aliquam erat volutpat. Sed commodo elit ac neque eleifend in commodo justo elementum. Curabitur tristique, odio id convallis aliquet, nibh augue sollicitudin lacus, at fermentum sem dolor eu lacus. Proin gravida dui in libero aliquet quis egestas odio dictum. Fusce in ligula vitae ante mollis viverra. Curabitur nibh felis, ornare ut tempor sed, lobortis id elit. Phasellus nec semper lorem. Pellentesque erat augue, tincidunt sed vulputate et, congue nec felis. Sed ligula metus, condimentum non commodo et, varius varius nisi.</p>	<p>Nunc arcu justo, elementum ac accumsan id, porttitor ac sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lectus eros, dignissim sit amet viverra et, vulputate gravida dui. Donec at mattis tellus. Suspendisse nisi purus, porttitor in lacinia ornare, malesuada non dolor. Praesent ligula massa, blandit nec consequat et, sagittis ut purus. Aliquam erat volutpat. Maecenas a arcu ligula. Proin vitae eros purus, eu adipiscing orci. Nunc vestibulum, ante quis venenatis facilisis, lacus arcu gravida arcu, eget varius nibh lacus et leo. Aliquam lacinia, mi et convallis tincidunt, massa tellus accumsan felis, at consequat lacus ligula non leo. Pellentesque auctor ipsum lorem, ut feugiat purus. Mauris sed tellus orci, in pharetra dui. Morbi vestibulum lectus nec nulla bibendum mollis.</p>	<p>Donec nulla nisi, dictum auctor aliquet a, ultrices quis ipsum. Nam bibendum arcu in quam condimentum ut aliquet odio luctus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacus nulla, laoreet a fermentum vel, scelerisque sed mi. In consectetur magna sed leo scelerisque id mattis enim vulputate. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In cursus vulputate mauris et semper. Nam sed rhoncus justo. Duis quis orci quis lorem egestas mattis et in risus. Aenean justo eros, luctus sit amet ultricies et, interdum non est.</p>	<p>Donec nulla nisi, dictum auctor aliquet a, ultrices quis ipsum. Nam bibendum arcu in quam condimentum ut aliquet odio luctus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacus nulla, laoreet a fermentum vel, scelerisque sed mi. In consectetur magna sed leo scelerisque id mattis enim vulputate. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In cursus vulputate mauris et semper. Nam sed rhoncus justo. Duis quis orci quis lorem egestas mattis et in risus. Aenean justo eros, luctus sit amet ultricies et, interdum non est.</p>	<p>Donec nulla nisi, dictum auctor aliquet a, ultrices quis ipsum. Nam bibendum arcu in quam condimentum ut aliquet odio luctus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacus nulla, laoreet a fermentum vel, scelerisque sed mi. In consectetur magna sed leo scelerisque id mattis enim vulputate. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In cursus vulputate mauris et semper. Nam sed rhoncus justo. Duis quis orci quis lorem egestas mattis et in risus. Aenean justo eros, luctus sit amet ultricies et, interdum non est.</p>	<p>Donec nulla nisi, dictum auctor aliquet a, ultrices quis ipsum. Nam bibendum arcu in quam condimentum ut aliquet odio luctus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacus nulla, laoreet a fermentum vel, scelerisque sed mi. In consectetur magna sed leo scelerisque id mattis enim vulputate. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In cursus vulputate mauris et semper. Nam sed rhoncus justo. Duis quis orci quis lorem egestas mattis et in risus. Aenean justo eros, luctus sit amet ultricies et, interdum non est.</p>	<p>Donec nulla nisi, dictum auctor aliquet a, ultrices quis ipsum. Nam bibendum arcu in quam condimentum ut aliquet odio luctus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacus nulla, laoreet a fermentum vel, scelerisque sed mi. In consectetur magna sed leo scelerisque id mattis enim vulputate. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In cursus vulputate mauris et semper. Nam sed rhoncus justo. Duis quis orci quis lorem egestas mattis et in risus. Aenean justo eros, luctus sit amet ultricies et, interdum non est.</p>	<p>Donec nulla nisi, dictum auctor aliquet a, ultrices quis ipsum. Nam bibendum arcu in quam condimentum ut aliquet odio luctus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacus nulla, laoreet a fermentum vel, scelerisque sed mi. In consectetur magna sed leo scelerisque id mattis enim vulputate. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In cursus vulputate mauris et semper. Nam sed rhoncus justo. Duis quis orci quis lorem egestas mattis et in risus. Aenean justo eros, luctus sit amet ultricies et, interdum non est.</p>	</div>	</div>	</div>	<!--End Pattern HTML--> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Off-Canvas LeftResponsive Page with hidden music player widget in left sidebar - Script Codes CSS Codes

html, body, .wrap, .pattern { height: 100%; width: 98%;
}
html, body { padding: 0; margin: 0; padding: .3em; border: 1px solid black;
}
.wrap {	position: relative;	-webkit-transition: all 0.7s ease-out;	-moz-transition: all 0.7s ease-out;	-ms-transition: all 0.7s ease-out;	-o-transition: all 0.7s ease-out;	transition: all 0.7s ease-out;	}
.menu-link {
background: url("../images/vitruvi-symbol.png") top left no-repeat;
background: url("https://vitruvi.wpengine.com/wp-content/themes/vitruvi-interim/assets/images/vitruvi-symbol.svg") top left no-repeat; display: block;
width: 27px;
height: 26px;
margin: 1em;
}	.wrap.active {	left: 16em;	}	a.menu-link { float: left; display: block; padding: 1em;	}	.oc {	background:#f2e7da;	padding: 8px;	clear: both;	overflow: hidden;	}
.inner-border { padding: 1em; border: 1px solid black;
}	.js .oc {	width: 16em;	height: 100%;	position: absolute;	top: 0;	left: -16em;	}	.lorem {	clear: both;	}

Off-Canvas LeftResponsive Page with hidden music player widget in left sidebar - Script Codes JS Codes

$(document).ready(function() { $('body').addClass('js'); var $menu = $('#menu'), $menulink = $('.menu-link'), $wrap = $('#wrap'); $menulink.click(function() { $menulink.toggleClass('active'); $wrap.toggleClass('active'); return false; });
}); /* You could place other Widgets or text etc in the hidden sidebar as well.
Forked and modified by Stan Williams http://stans-songs.com and http://stanwilliamsmusic.com https://codepen.io/Stanssongs
*/
Off-Canvas LeftResponsive Page with hidden music player widget in left sidebar - Script Codes
Off-Canvas LeftResponsive Page with hidden music player widget in left sidebar - Script Codes
Home Page Home
Developer Stan Williams
Username Stanssongs
Uploaded September 08, 2022
Rating 3
Size 5,692 Kb
Views 34,408
Do you need developer help for Off-Canvas LeftResponsive Page with hidden music player widget in left sidebar?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Stan Williams (Stanssongs) Script Codes
Name
Record Player with CSS3 Anims and HTML5 Audio
HTML5 Player with Flash fallback for non supporting browsers.
Circular rotating music player with menu on back with html5 javascript and css3
Animated Digital Flip Clock
Horizontal Menu Demo
Bootstrap Fontawesome Icon Social Buttons
Mouse Position Background Focus Effect
Background Image Slideshow Menu
A Pen by Stan Williams
Responsive Company Page
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!