FeatureList.js – Kullanışlı bir manşet çalışması

FeatureList.js Sitemizin en üst bölümüne ekleyebileceğimiz buna benzer bir sürü örnek var internet üzerinde. Ama hiç biri tam olarak istediğimiz  gibi olamıyor. FeatureList.js uygulaması gibi ücretsiz olarak dağıtılan benzer çalışmalar da görmeidm şu ana kadar. Muhtemelen ücretli yada ücretsiz olanları vardır ama daha bana denk gelmedi. Sol taraftaki başlıklara incelemek için tıkladığınızda sağ tarafta başlığın resmi çıkıyor ve konu başlığının arkaplanı siyah ok işareti gibi oluyor. Fotoğraflar arası geçiş fade efekti ile gerçekleşiyor. Kullanımı oldukça basit sadece aşağıdaki adımları izleyerek sitenize uyarlamanız mümkün.  Ayrıca otomatik geçiş özelliği de bulunuyor bu çalışmada. Bir açıdan baktığınızda slayt örneği gibi görülebilir olsa da tab olarak tasarlanmış. Örneğin üzerinde herhangi bir değişiklik yapmadan da kullanabilirsiniz. Olduğu gibi sitenize uyarlamanız en iyisidir bence.

Kullanım

  • Head  etiketleri arasına eklenmesi gereken bölümler.

Js dosya  aresleri :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript" src="jquery.featureList-1.0.0.js"></script>

Stil : 

<style type="text/css">

		h3 {
			margin: 0;	
			padding: 7px 0 0 0;
			font-size: 16px;
			text-transform: uppercase;
		}

		div#feature_list {
			width: 750px;
			height: 240px;
			overflow: hidden;
			position: relative;
		}

		div#feature_list ul {
			position: absolute;
			top: 0;
			list-style: none;	
			padding: 0;
			margin: 0;
		}

		ul#tabs {
			left: 0;
			z-index: 2;
			width: 320px;
		}

		ul#tabs li {
			font-size: 12px;
			font-family: Arial;
		}

		ul#tabs li img {
			padding: 5px;
			border: none;
			float: left;
			margin: 10px 10px 0 0;
		}

		ul#tabs li a {
			color: #222;
			text-decoration: none;	
			display: block;
			padding: 10px;
			height: 60px;
			outline: none;
		}

		ul#tabs li a:hover {
			text-decoration: underline;
		}

		ul#tabs li a.current {
			background:  url('feature-tab-current.png');
			color: #FFF;
		}

		ul#tabs li a.current:hover {
			text-decoration: none;
			cursor: default;
		}

		ul#output {
			right: 0;
			width: 463px;
			height: 240px;
			position: relative;
		}

		ul#output li {
			position: absolute;
			width: 463px;
			height: 240px;
		}

		ul#output li a {
			position: absolute;
			bottom: 10px;
			right: 10px;
			padding: 8px 12px;
			text-decoration: none;
			font-size: 11px;
			color: #FFF;
			background: #000;
			-moz-border-radius: 5px;
		}

		ul#output li a:hover {
			background: #D33431;
		}
	</style>

JavaScript :

<script language="javascript">
	$(document).ready(function() {
		$.featureList(
			$("#tabs li a"),
			$("#output li"), {
				start_item	:	1
			}
		);
	});
</script>
  •  Body  etiketleri arasına eklenmesi gereken bölüm.
<style type="text/css">
<div id="content">


		<hr />

		<div id="feature_list">
			<ul id="tabs">
				<li>
					<a href="javascript:;">
						<img data-src="services.png" data-lazy="true" src="https://www.mintik.com/wp-content/themes/mintik/assets/img/z/load-tip.png" //>
						<h3>Services</h3>
						<span>Lorem ipsum dolor sit amet consect</span>
					</a>
				</li>
				<li>
					<a href="javascript:;">
						<img data-src="programming.png" data-lazy="true" src="https://www.mintik.com/wp-content/themes/mintik/assets/img/z/load-tip.png" //>
						<h3>Programming</h3>
						<span>Lorem ipsum dolor sit amet consect</span>
					</a>
				</li>
				<li>
					<a href="javascript:;">
						<img data-src="applications.png" data-lazy="true" src="https://www.mintik.com/wp-content/themes/mintik/assets/img/z/load-tip.png" //>
						<h3>Applications</h3>
						<span>Lorem ipsum dolor sit amet consect</span>
					</a>
				</li>
			</ul>
			<ul id="output">
				<li>
					<img data-src="sample1.jpg" data-lazy="true" src="https://www.mintik.com/wp-content/themes/mintik/assets/img/z/load-tip.png" //>
					<a href="#">See project details</a>
				</li>
				<li>
					<img data-src="sample2.jpg" data-lazy="true" src="https://www.mintik.com/wp-content/themes/mintik/assets/img/z/load-tip.png" //>
					<a href="#">See project details</a>
				</li>
				<li>
					<img data-src="sample3.jpg" data-lazy="true" src="https://www.mintik.com/wp-content/themes/mintik/assets/img/z/load-tip.png" //>
					<a href="#">See project details</a>
				</li>
			</ul>

		</div>
	</div>

Ali
Telif Hakkı Bildirimi:Bu sitedeki orijinal makaleyi Ali2021-03-30 tarihinde yayınlandı,Toplam 2137 karakterden oluşmaktadır.
Yeniden yazdırma ipuçları:Özel talimatlar dışında, bu sitedeki tüm makaleler CC-4.0 sözleşmesi kapsamında yayınlanmaktadır.Yeniden basılması için lütfen kaynak belirtiniz.
Yorum yap(Yorum yapılmamış)
Yükleniyor...