smarti,스마트아이

펼침메뉴 예제

CSS jQuery를 이용한 펼침 메뉴

예제보기

다운로드

RockingRollingMenu.zip

0.09MB

menu를 div로 감싸고, 각 항목에는 링크 요소로서의 아이콘과 검색상자를 추가, 제목과 단락이 있는 div가 있다.

<div class="menu">
	<div class="item">
		<a class="link icon_mail"></a>
		<div class="item_content">
			<h2>Contact us</h2>
			<p>
				<a href="#">eMail</a>
				<a href="#">Twitter</a>
				<a href="#">Facebook</a>
			</p>
		</div>
	</div>
	<div class="item">
		<a class="link icon_help"></a>
		<div class="item_content">
			<h2>Help</h2>
			<p>
				<a href="#">FAQ</a>
				<a href="#">Live Support</a>
				<a href="#">Tickets</a>
			</p>
		</div>
	</div>
	<div class="item">
		<a class="link icon_find"></a>
		<div class="item_content">
			<h2>Search</h2>
			<p>
				<input type="text"></input>
				<a href="">Go</a>
			</p>
		</div>
	</div>
	<div class="item">
		<a class="link icon_photos"></a>
		<div class="item_content">
			<h2>Image Gallery</h2>
			<p>
				<a href="#">Categories</a>
				<a href="#">Archives</a>
				<a href="#">Featured</a>
			</p>
		</div>
	</div>
	<div class="item">
		<a class="link icon_home"></a>
		<div class="item_content">
			<h2>Start from here</h2>
			<p>
				<a href="#">Services</a>
				<a href="#">Portfolio</a>
				<a href="#">Pricing</a>
			</p>
		</div>
	</div>
</div>

 

CSS

글꼴과 같은 일반적인 스타일은 다음과 같이 정의한다.

.menu{
    width:800px;
    height:52px;
    position:relative;
    top:200px;
    left:100px;
    font-family: "Trebuchet MS", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: bold;
    text-transform: uppercase;
}

메뉴 안의 항목은 왼쪽으로 확장하고 다른 항목은 밀어 내기 위해 오른쪽에 떠있게 한다.

.item{
    position:relative;
    background-color:#f0f0f0;
    float:right;
    width:52px;
    margin:0px 5px;
    height:52px;
    border:2px solid #ddd;
    -moz-border-radius:30px;
    -webkit-border-radius:30px;
    border-radius:30px;
    -moz-box-shadow:1px 1px 3px #555;
    -webkit-box-shadow:1px 1px 3px #555;
    box-shadow:1px 1px 3px #555;
    cursor:pointer;
    overflow:hidden;
}

다음 아이콘 스타일을 다음과 같이 정의한다.

.link{
    left:2px;
    top:2px;
    position:absolute;
    width:48px;
    height:48px;
}
.icon_home{
    background:transparent url(../images/home.png) no-repeat top left;
}
.icon_mail{
    background:transparent url(../images/mail.png) no-repeat top left;
}
.icon_help{
    background:transparent url(../images/help.png) no-repeat top left;
}
.icon_find{
    background:transparent url(../images/find.png) no-repeat top left;
}
.icon_photos{
    background:transparent url(../images/photos.png) no-repeat top left;
}

다른 요소는 다음과 같이 스타일을 지정한다.

.item_content{
    position:absolute;
    height:52px;
    width:220px;
    overflow:hidden;
    left:56px;
    top:7px;
    background:transparent;
    display:none;
}
.item_content h2{
    color:#aaa;
    text-shadow: 1px 1px 1px #fff;
    background-color:transparent;
    font-size:14px;
}
.item_content a{
    background-color:transparent;
    float:left;
    margin-right:7px;
    margin-top:3px;
    color:#bbb;
    text-shadow: 1px 1px 1px #fff;
    text-decoration:none;
    font-size:12px;
}
.item_content a:hover{
    color:#0b965b;
}
.item_content p {
    background-color:transparent;
    display:none;
}
.item_content p input{
    border:1px solid #ccc;
    padding:1px;
    width:155px;
    float:left;
    margin-right:5px;
}

 

JavaScript

다음 기능을 추가한다.

$('.item').hover(
	function(){
		var $this = $(this);
		expand($this);
	},
	function(){
		var $this = $(this);
		collapse($this);
	}
);
function expand($elem){
	var angle = 0;
	var t = setInterval(function () {
		if(angle == 1440){
			clearInterval(t);
			return;
		}
		angle += 40;
		$('.link',$elem).stop().animate({rotate: '+=-40deg'}, 0);
	},10);
	$elem.stop().animate({width:'268px'}, 1000)
	.find('.item_content').fadeIn(400,function(){
		$(this).find('p').stop(true,true).fadeIn(600);
	});
}
function collapse($elem){
	var angle = 1440;
	var t = setInterval(function () {
		if(angle == 0){
			clearInterval(t);
			return;
		}
		angle -= 40;
		$('.link',$elem).stop().animate({rotate: '+=40deg'}, 0);
	},10);
	$elem.stop().animate({width:'52px'}, 1000)
	.find('.item_content').stop(true,true).fadeOut()
          .find('p').stop(true,true).fadeOut();
}

Quotation : 메리 루 (웹디자이너 겸 개발자)

 

[코딩공부] - CSS fixedNavigation2 예제 다운로드

CSS fixedNavigation2 예제 다운로드

[코딩공부] - CSS fixedNavigation1 예제 다운로드

CSS fixedNavigation1 예제 다운로드

[세상살이] - 구글 메시지를 이용, PC에서 문자 보내기

구글 메시지를 이용, PC에서 문자 보내기

[디자인공부] - 포토샵으로 모피 문자 만들기

포토샵으로 모피 문자 만들기

[코딩공부] - 아파치(Apache 2.4.46) 웹서버 설치하기, 윈도우10

아파치(Apache 2.4.46) 웹서버 설치하기, 윈도우10