Accordion news – lista wiadomości

Demo:
  • 12.04.2014

    eWeb Design

    Tu quoque, Brute, fili mi, nihil timor populi, nihil! Vivamus sagittis lacus vel augue laoreet rutrum faucibus. Salutantibus vitae elit libero, a pharetra augue. Curabitur est gravida et libero vitae dictum. więcej

  • 18.04.2014

    iPhone rulezz

    Tu quoque, Brute, fili mi, nihil timor populi, nihil! Vivamus sagittis lacus vel augue laoreet rutrum faucibus. Salutantibus vitae elit libero, a pharetra augue. Curabitur est gravida et libero vitae dictum. więcej

  • 30.04.2014

    Home office all time

    Tu quoque, Brute, fili mi, nihil timor populi, nihil! Vivamus sagittis lacus vel augue laoreet rutrum faucibus. Salutantibus vitae elit libero, a pharetra augue. Curabitur est gravida et libero vitae dictum. więcej

  • 3.05.2014

    Be ready, take a camera

    Tu quoque, Brute, fili mi, nihil timor populi, nihil! Vivamus sagittis lacus vel augue laoreet rutrum faucibus. Salutantibus vitae elit libero, a pharetra augue. Curabitur est gravida et libero vitae dictum. więcej

Wiadomości, aktualności, to element strony, który bardzo często ma zastosowanie na stronach internetowych. Aby przyciągnąć uwagę i zachęcić użytkownika do przeczytania wiadomości konieczna jest dobra forma tego elementu.

Poniżej przedstawiam ciekawą propozycję na listę z wiadomościami.

Układ elementów strony

Nasza lista z wiadomościami jest zawarta w formie znaczników listy ul > li

<div class="ewd_news_accordion">
	<ul class="ewd_list">
		<li class="ewd_list_1">
			<div class="ewd_info_list">
				<p class="date"><i class="fa fa-laptop"></i></p>
				<span>12.04.2014</span>
			</div>
			<div class="ewd_content_list">
				<h1>eWeb Design</h1>
				<p class="desc">
					Tu quoque, Brute, fili mi, nihil timor populi, nihil! Vivamus sagittis lacus vel augue laoreet rutrum faucibus. Salutantibus vitae elit libero, a pharetra augue. Curabitur est gravida et libero vitae dictum.
					<span class="more">więcej</span>
				</p>
			</div>
	
			<div style="clear:both;"></div>
		</li>
		<li class="ewd_list_2">
			<div class="ewd_info_list">
				<p class="date"><i class="fa fa-star"></i></p>
				<span>18.04.2014</span>
			</div>
			<div class="ewd_content_list">
				<h1>iPhone rulezz</h1>
				<p class="desc">
					Tu quoque, Brute, fili mi, nihil timor populi, nihil! Vivamus sagittis lacus vel augue laoreet rutrum faucibus. Salutantibus vitae elit libero, a pharetra augue. Curabitur est gravida et libero vitae dictum.
					<span class="more">więcej</span>
				</p>
			</div>
			<div style="clear:both;"></div>
			
		</li>
		<li class="ewd_list_3">
			<div class="ewd_info_list">
				<p class="date"><i class="fa fa-random"></i></p>
				<span>30.04.2014</span>
			</div>
			<div class="ewd_content_list">
				<h1>Home office all time</h1>
				<p class="desc">
					Tu quoque, Brute, fili mi, nihil timor populi, nihil! Vivamus sagittis lacus vel augue laoreet rutrum faucibus. Salutantibus vitae elit libero, a pharetra augue. Curabitur est gravida et libero vitae dictum.
					<span class="more">więcej</span>
				</p>
			</div>
			<div style="clear:both;"></div>
			
		</li>
		<li class="ewd_list_4">
			<div class="ewd_info_list">
				<p class="date"><i class="fa fa-random"></i></p>
				<span>3.05.2014</span>
			</div>
			<div class="ewd_content_list">
				<h1>Be ready, take a camera</h1>
				<p class="desc">
					Tu quoque, Brute, fili mi, nihil timor populi, nihil! Vivamus sagittis lacus vel augue laoreet rutrum faucibus. Salutantibus vitae elit libero, a pharetra augue. Curabitur est gravida et libero vitae dictum.
					<span class="more">więcej</span>
				</p>
			</div>
			<div style="clear:both;"></div>
			
		</li>		
	</ul>
</div>

Style css

Każdy element nabiera właściwych kształtów dzięki stylom css. Nie inaczej jest w tym przypadku.


.ewd_news_accordion ul.ewd_list
{
	margin:0;
	padding:0;
	width:900px;
}
.ewd_news_accordion ul.ewd_list li
{
	list-style:none;
	height:auto;
	margin:25px 0;
	background-position:right;
	background-size:30%;
	background-repeat:no-repeat;
	cursor:pointer;
}
.ewd_news_accordion ul.ewd_list li.active
{
	cursor:auto;
}
.ewd_news_accordion ul.ewd_list li.ewd_list_1
{
	background-image:url("../img/image1.jpg");
}
.ewd_news_accordion ul.ewd_list li.ewd_list_2
{
	background-image:url(../img/image2.jpg);
}
.ewd_news_accordion ul.ewd_list li.ewd_list_3
{
	background-image:url(../img/image3.jpg);
}
.ewd_news_accordion ul.ewd_list li.ewd_list_4
{
	background-image:url(../img/image4.jpg);
}
.ewd_list .ewd_info_list
{
	float:left;
	width:10%;
	height:100%;
}
.ewd_list li.active .ewd_info_list
{
	background:url(../img/arrow.png) 105% 17px no-repeat;
}
.ewd_list .ewd_info_list p.date
{
	width:40px;
	height:40px;
	border-radius:50%;
	background:#f0f0f0;
	margin: 10px auto;
	text-align:center;
}
.ewd_list .ewd_info_list span
{
	font-size:13px;
	color:#555;
	width:100%;
	display:inline-block;
	text-align:center;
}
.ewd_content_list
{
	float:left;
	width:60%;
	padding-left:20px;
	background:#fff;
	border-left:5px solid #fff;
}	
.ewd_content_list .desc
{
	display:none;
}
li.active .desc
{
	display:block;
}
.ewd_list li.active .ewd_content_list
{
	border-left:5px solid #DD0055;
}
.ewd_list li.active .ewd_info_list .date
{
	background:#DD0055;
}
.ewd_list li.active .ewd_info_list span
{
	color:#fff;
}

.ewd_content_list .more
{
	display:block;
	margin:10px;
	background:#333333;
	color:#fff;
	padding:5px 10px;
	width:55px;
	text-align:center;
	cursor:pointer;
}	
.ewd_content_list .more:hover
{
	background:#DD0055;
	 transition: all .9s ease-in-out;
}
i.fa
{
	color: #FFFFFF;
    position: relative;
    top: 10px;
}

jQuery

Można obejść się bez jQuery, ale jak ktoś spróbuje to sam zobaczy, że podgląd wiadomości jest bardzo chaotyczny, dlatego ja wykorzystuję bardzo prosty skrypt, który dodaje wyłącznie klasę po kliknięciu i kasuje ją po zjechaniu kursorem z danego elementu.

$(function()
	{
		$('.ewd_list li').click(function() {
			$(this).addClass('active');
		});
		$('.ewd_list li').mouseleave(function() {
			$(this).removeClass('active');
		});		
	});

Podsumowanie

Dodatkowe efekty graficzne, jakie wykorzystuję na stronie to czcionki awesome. Można ten element pominąć, albo dodać własną grafikę. Jednak implementacja tych czcionek jest bardzo łatwa a wybór zadowalający.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

CAPTCHA
Change the CAPTCHA codeSpeak the CAPTCHA code