Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Need expert help

    The website http://www.fabioneural.com/ has the kind of navigation/content structure I want to use on my own site. Can someone help me figure out how this is done. I am not new to html or css or javascript, but still am having trouble with this. Any help is appreciated. Thanks!

  • #2
    New Coder
    Join Date
    Sep 2011
    Location
    Braintree, Massachusetts
    Posts
    48
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by tendress11 View Post
    The website http://www.fabioneural.com/ has the kind of navigation/content structure I want to use on my own site. Can someone help me figure out how this is done. I am not new to html or css or javascript, but still am having trouble with this. Any help is appreciated. Thanks!

    Did you take a look at the source code? Remember, ripping off another poerson's website could potentially fall under copywright laws. but here's the source code anyway, *if you use this, it is at your own risk, i am not responsible with what you do to/with/without this code*

    Code:
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <meta name="copyright" content="netfabrica" />
    		<meta name="description" content="Fabio Neural italian deejay and producer. Handcrafted beats from Italy" />
    		<meta name="keywords" content="Fabio Neural, tini', viva music, deejay, producer, dj italy, dj tuscan, music, single, remixes" />
    		<title>FABIO NEURAL dj producer</title>
    
    		<meta name="robots" content="index,follow" />
    		<link rel="image_src" href="http://www.fabioneural.com/fabioneural.jpg" />
    		<link rel="shortcut icon" href="images/favicon.png">
    
    
    		<link rel="stylesheet" type="text/css" href="css/style.min.css" />
    		
    		<script type='text/javascript' src='js/jquery-1.5.min.js'></script>
    
    		<!--[if lt IE 9]>
    		<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    		<![endif]-->
    
    		<script type="text/javascript" src="js/jquery-functions.js"></script>
    		<script type="text/javascript" src="js/plax.js"></script>
    				    	
    		<script type="text/javascript" src="js/mainn.js"></script>
    	</head>
    
    	<body>
    		
    		<noscript>
    			<div class="noScript">
    				<div class="wrap">
    				<h1>Fabio Neural dj &AMP; producer</h1>
                    <p style="margin: 11px;">Fabio Neural italian deejay and producer. Handcrafted beats from Italy.</p>
                    <p style="font-size:18px;">Enable javascript in your browser!</p>
                    </div>
                </div>
    		</noscript>
    		
    		
    		<div id="gfPreloader">
    		</div>
    		<div id="wrap">
    
    			<header class="header">
    				<div id="logo_pink"></div>
    				<div id="logo_black"></div>
    				<div id="logo_white"></div>
    				
    				<nav class="menu">
    					<ol>
    						<li>
    							<h3>
    							<a id="about_btn" class="section_btn" rel="about">about me</a>
    							</h3>
    						</li>
    						<li>
    							<h3>
    							<a id="media_btn" class="section_btn" rel="media">media</a>
    							</h3>
    						</li>
    						<li>
    							<h3>
    							<a id="contacts_btn" class="section_btn" rel="contacts">contacts</a>
    							</h3>
    						</li>
    					</ol>
    				</nav>
    			</header>
    
    		</div>
    
    		<section id="page_about" class="page hide">
    	<div class="inner">
    
    		<h2 class="box">ABOUT ME</h2>
    
    		<div class="close_page">
    			<a class="close_btn" rel="about" href="#"></a>
    		</div>
    
    		<div id="gfSlide-nav-about" class="gfSlide-nav_menu">
    
    			<ul>
    				<li class="first">
    					<a href="#biography" title="Biography" rel="1">biography</a>
    				</li>
    				<li>
    					<a href="#discography" title="Discography" rel="2">discography</a>
    				</li>
    				<li>
    					<a href="#news" title="News"  rel="3">news</a>
    				</li>
    				<li class="last">
    					<a href="#gigs" title="gigs" rel="4">gigs</a>
    				</li>
    			</ul>
    
    		</div>
    
    		<div class="gfSlide-slider-wrapper">
    
    			<div class="gfSlide-slider preload" id="gfSlide-slider-about">
    
    				<div class="panel">
    
    					<div class="panel-wrapper_big">
    						<div class="col-wrap">
    							<div class="col">
    								<p>
    									As we know, a suitcase can be packed with many thing, more or less important. For some is essential a guide, for others work documents, for those like Fabio Rossi, aka Fabio Neural, who plays in clubs from many years, is surely fundamental his Tracktor Scratch, a friend of travel than more a work instrument. Indispensable for his mixes that are making him known to all of those who follow the actual house movement  of tha national music scene.
    									Music, a passion that comes from affair. At already 12 years old his first stunning meeting with the electronic world and its style. A love that starts straight away, that brings him, growing, to become a lover and a follower of techno synthetize.
    									Study and love for new experiences have been his meal until today, such as Spain (where he spent a few years of his life), his school of style and life, but above all of music, like ‘Microfusa School’ from the catalan capital,where on 2006, he refines his techniques and makes important friendship that bring himself to play around Europe.
    									Antwerp, Barcellona, Tenerife and in 2007 Ibiza, for the summer season, where he wins a contest for emergent djs, a holiday prize at WMC 2008 in Miami and important radio appearances in the most famous radio show of the island: Ibiza Global Radio, Sonica and Europa FM.
    								</p>
    							</div>
    							<div class="col last">
    								<p>
    									Fabio Neural is tenacious  and he is not certainly satisfied with first small successes, on the contrary, in the following years, comes back to Italy he plays in the clubs of half peninsula, alongside artists like Carl Cox, Magda, Ellen Allien, Minilogue, Joris Voorn, Livio & Roby, Paco Osuna,  Marc Antona and all the best Italian djs, from Tenax and Reflex of Florence to Palladium of Rome, passing by Kama Kama of Versilia and Tartana of Follonica.
    									2010, a decisive year, his track ‘Guru’ is released by Steve Lawler label: VIVa MUSIC, a success that will be followed in next months by new releases on the same VIVa MUSIC, but not only, SAF, TERMINAL M, NATURAL RHYTHM, EXPRESS YOURSELF, INDIPENDENTE.
    									From 3 years Dj resident of Tini’ Soundgarden, this year he will take part for the third consecutive year at the event ‘Sven Vath in the park’.
    									Therefore, a suitcase, full of experiences but above all, full of energy for his next and long awaited dj sets.
    								</p>
    							</div>
    						</div>
    					</div>
    
    				</div>
    
    				<div class="panel">
    
    					<div class="panel-wrapper_big" id="panel_discography">
    						<h4>2011</h4>
    						<ul>
    							<li>Jamal Ep – Quanticman Rec</li>
    							<li>Brandeburg, Cicuta – Carillon</li>
    							<li>Porto Alegra <span class="det">(Darius Syrossina rmx)</span> – Best of 2010 VIVa MUSIC</li>
    							<li>Alexuu & TDK, Ciprian Jordache – Bonita <span class="det">(Fabio Neural rmx)</span> – Microtech</li>
    							<li>Simone Godenzi – Closer To Me <span class="det">(Fabio Neural rmx)</span> – Potobolo</li>
    							<li>Rise My World Ep - Retouch</li>
    						</ul>
    
    						<h4>2010</h4>
    						<ul>
    							<li>Guru – Various VIVa MUSIC</li>
    							<li>Porto Alegra, Taride Ep – VIVa MUSIC</li>
    							<li>Let Me Play, Brooklyn – 10 Years Terminal M</li>
    							<li>Silentalk – Get Busy <span class="det">(Fabio Neural rmx)</span> – Indipendente</li>
    							<li>Muse Ep – Express Yourself</li>
    							<li>Deeper Love edit – Saf Series</li>
    							<li>Khaan – See What Comes <span class="det">(Fabio Neural Groove mix)</span> – Natural Rhythm</li>
    						</ul>
    						<h4>2008</h4>
    						<ul>
    							<li>Donde Estas Papa Ep – Area94</li>
    							<li>Qui Pro Quo Ep – Beat To Beat Rec</li>
    						</ul>
    					</div>
    
    				</div>
    
    				<div class="panel">
    
    					<div class="panel-wrapper_big">
    
    						<div class="tweet twitter-footer">
    						</div>
    
    					</div>
    
    				</div>
    
    				<div class="panel">
    
    					<div class="panel-wrapper_big">
    						
    						<div id="gigs-wrap"></div>
    						
    					</div>
    
    				</div>
    
    			</div>
    
    		</div>
    	</div>
    </section>
    <section id="page_media" class="page hide">
    	<div class="inner">
    
    		<h2>MEDIA</h2>
    
    		<div class="close_page">
    			<a class="close_btn" rel="media" href="#"></a>
    		</div>
    
    		<div id="gfSlide-nav-media" class="gfSlide-nav_menu">
    
    			<ul>
    				<li class="first">
    					<a href="#video" title="Video" rel="1">Video</a>
    				</li>
    
    				<li>
    					<a href="#music" title="music" rel="2">Music</a>
    				</li>
    				<li>
    					<a href="#djset" title="DjSet" rel="3">DjSet</a>
    				</li>
    				<li class="last" >
    					<a href="#gallery" title="Gallery" rel="4">Gallery</a>
    				</li>
    			</ul>
    
    		</div>
    
    		<div class="gfSlide-slider-wrapper">
    
    			<div class="gfSlide-slider preload" id="gfSlide-slider-media">
    
    				<div class="panel">
    
    					<div class="panel-wrapper_big">
    
    						<div class="all-video">
    
    							<div id="videos_wrap">
    
    							</div>
    
    						</div>
    
    					</div>
    
    				</div>
    
    				<div class="panel">
    
    					<div class="panel-wrapper_big">
    
    						<div class="all-music" id="all-tracks">
    							<div class="iframe-loading"></div>
    
    						</div>
    
    					</div>
    
    				</div>
    
    				<div class="panel">
    
    					<div class="panel-wrapper_big">
    
    						<div class="all-music" id="all-djsets">
    							<div class="iframe-loading"></div>
    
    						</div>
    					</div>
    
    				</div>
    
    				<div class="panel">
    
    					<div class="panel-wrapper_big">
    
    						<div class="all-gallery">
    
    							<div id="gallery_wrap">
    
    							</div>
    
    						</div>
    
    					</div>
    
    				</div>
    
    			</div>
    
    		</div>
    	</div>
    </section>
    <section id="page_contacts" class="page hide">
    	<div class="inner">
    		<h2>CONTACTS</h2>
    
    		<div class="close_page">
    			<a class="close_btn" rel="contacts" href="#"></a>
    		</div>
    
    		<div id="gfSlide-nav-contacts" class="gfSlide-nav_menu">
    
    			<ul>
    				<li class="first">
    					<a href="#contacts" title="contacts" rel="1">contacts&amp;bookings</a>
    				</li>
    				<li class="last">
    					<a href="#pressKit" title="pressKit" rel="2">presskit</a>
    				</li>
    
    			</ul>
    
    		</div>
    
    		<div class="gfSlide-slider-wrapper preload_page">
    
    			<div class="gfSlide-slider" id="gfSlide-slider-contacts">
    
    				<div class="panel">
    
    					<div class="panel-wrapper_big">
    
    						<div class="contact-box">
    
    							<h4>leave me a message</h4>
    							<div class="contactform">
    
    								<form action="#" name="info_form" id="info_form" method="post">
    
    									<div class="row">
    										<label>
    											Nome e cognome:
    										</label>
    										<input name="name" type="text" class="field-name" id="name" onfocus="javascript:if(this.value == 'name *') this.value='';" value="name *" />
    									</div>
    									<div class="row">
    										<label>
    											Email:
    										</label>
    										<input name="email" type="text" class="field-email" id="email" onfocus="javascript:if(this.value == 'email *') this.value='';" value="email *" />
    									</div>
    									<div class="row">
    										<label>
    											Phone:
    										</label>
    										<input name="phone" type="text" class="field-telephone" id="phone" onfocus="javascript:if(this.value == 'phone') this.value='';" value="phone" />
    									</div>
    
    									<div class="row">
    										<textarea name="message" id="message" onfocus="javascript:if(this.innerHTML == 'message *') this.innerHTML='';">message *</textarea>
    									</div>
    
    									<div class="row">
    										<input value="Send" type="submit" id="submit" class="button" />
    									</div>
    
    								</form>
    							</div>
    
    						</div>
    
    						<div class="splash_error">
    							<p>
    							</p>
    						</div>
    
    						<div class="social-box">
    
    							<h4>for booking</h4>
    							<p>
    								direct contact
    								<span class="white">+39 338 6974491</span>
    							</p>
    							<p class="spacer">
    								<span class="white">
    									<a href="mailto:valemysport@gmail.com">mail</a>
    								</span>
    							</p>
    
    							<h4>keep in touch</h4>
    
    							<div class="fb-like">
    								<a rel="nofollow" href="http://www.facebook.com/share.php?u=<;url>" class="fb_share_button" onclick="return fbs_click()" target="_blank" style="text-decoration:none;">Share</a>
    								<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2Ffabioneural&amp;width=76&amp;colorscheme=light&amp;show_faces=false&amp;layout=button_count&amp;locale=en_US" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:76px; height: 30px; margin-right: 30px; display: -moz-inline-block; display:inline-block;" allowTransparency="true">
    								</iframe>
    							</div>
    
    							<div class="tw-follow">
    								<iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://platform.twitter.com/widgets/follow_button.html?screen_name=fabioneural&show_count=true"style="width:300px; height:20px;">
    								</iframe>
    
    							</div>
    
    							<div class="sc-dropbox">
    								<a href='http://soundcloud.com/fabioneural/dropbox' style='display: block; background: transparent url(http://a1.sndcdn.com/images/dropbox_small_dark.png?16c02ae) top left no-repeat; color: #D9D9D9; font-size: 10px; height: 30px; padding: 26px 60px 0 12px; width: 127px; text-decoration: none; font-family: "Lucida Grande", Helvetica, Arial, sans-serif; line-height: 1.3em' class='soundcloud-dropbox' target="_blank">Send me your sounds</a>
    							</div>
    
    							<div class="center">
    
    								<a id="twitter" class="socialBtn" href="http://twitter.com/fabioneural" target="_blank"></a>
    								<a id="facebook" class="socialBtn" href="http://www.facebook.com/fabioneural" target="_blank"></a>
    								<a id="myspace" class="socialBtn" href="http://www.myspace.com/fabioneural" target="_blank"></a>
    								<a id="soundcloud" class="socialBtn" href="http://soundcloud.com/fabioneural" target="_blank"></a>
    								<a id="youtube" class="socialBtn" href="http://www.youtube.com/fabioneural" target="_blank"></a>
    								<a id="residentadvisor" class="socialBtn" href="http://www.residentadvisor.net/dj/fabioneural" target="_blank"></a>
    								
    
    							</div>
    
    						</div>
    
    						<div class="clear">
    						</div>
    						<script>
    							function fbs_click() {
    								u=location.href;
    								t=document.title;
    								window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(u)+'&t='+encodeURIComponent(t),'sharer','toolbar=0,status=0,width=626,height=436');
    								return false;
    							}
    						</script>
    					</div>
    				</div>
    
    				<div class="panel">
    
    					<div class="panel-wrapper_big">
    
    						<div class="presskit-download">
    							<a href="download/FNpresskit.zip"></a>
    						</div>
    						<div class="presskit-download-info">
    							<p>
    								Need more info? download my press kit!
    							</p>
    							<p style="margin-top: 7px; font-size: 12px;">
    								Press kit contains:
    							</p>
    							<ul style="margin-top: 7px;">
    								<li>
    									Logo
    								</li>
    								<li>
    									Photos
    								</li>
    								<li>
    									Pdf
    								</li>
    
    							</ul>
    						</div>
    
    					</div>
    
    				</div>
    
    			</div>
    
    		</div>
    	</div>
    </section>
    
    		
    		
    		<div id="overlay_credits"></div>
    		<div id="credits">
                <a class="close_credits"></a>
                <div class="nflogo"><a href="http://www.netfabrica.com" target="_blank"></a></div>
                <p class="copy">&copy; 2011 fabioneural.com<br />Site by netfabrica</p>
                <p class="fblike">
                    <iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2Fnetfabrica%2F247218378627634&amp;width=185&amp;colorscheme=dark&amp;show_faces=false&amp;layout=button_count&amp;locale=en_US" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width: 78px;height: 22px;position: relative;float: right;margin-top: 11px;" allowTransparency="true"></iframe>
                </p>
            </div>
            
            <footer id="footer">
    			<a id="credits_link" href="#">CREDITS</a>
    		</footer>
    		<span class="dots"></span>
    		
    		
    		<script type="text/javascript">
    
    		 var _gaq = _gaq || [];
    		 _gaq.push(['_setAccount', 'UA-5481085-9']);
    		 _gaq.push(['_trackPageview']);
    		
    		 (function() {
    		   var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    		   ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    		   var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    		 })();
    		
    		</script>
    		
    	</body>
    </html>
    It seems to be a pretty easy code to MAKE YOUR OWN with. try to see if you can look into the javascripting that the page uses, and possibly throw your own js code up in there and make it happen.

    P.s. what exactly do you want to do with it?

  • #3
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I am not trying to rip off his content, just the concept of a flyout menu and content that I can style to my liking and put my own content on. If you can point me in the right direction as to how the site accomplishes this that would be awesome!


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •