Cấp bậc tác giả:

HTML

Rounded Tab Menu Using jQuery and CSS

Được viết bởi QuangIT vào ngày 21/09/2012 lúc 10:19 PM

This article will show you how to create a rotating tab menu using jQuery and CSS step by step. We will create a menu with small icons that will rotate when hovering.

0
7321

Tải tệp tin: Click ở đây

Rounded Tab Menu Using jQuery and CSS

Introduction

This article will show you how to create a rotating tab menu using jQuery and CSS step by step. We will create a menu with small icons that will rotate when hovering. Also, we will make the menu item expand and reveal some menu content, like links or a search box. jQuery is a great tool that helps our imagination turn ideas into reality. We can do almost everything we can think of with the help of this useful tool.

Step 1: First we have to create a Web Application.

Go to Visual Studio 2010.

New--> And select the Web Application.

Give whatever name you want to.

Click OK.

Step 2: Secondly you have to add a new page to the website.

Go to the Solution Explorer.
Right-click on the project name.
Select add new item.
Add new web page and give it a name.
Click OK.

Step 3: Now add some image in the "Images" folder of the project.

Step 4: Than add the style.css files to your Styles folder.

Right-click on style.css files -> copy and paste it inside <Head> section of your page. The reference is look like as.
<link href="Styles/style.css" rel="stylesheet" type="text/css" />
Step 5: In this step add the CSS code inside the <style> tag and place it into the <head> section of your page.

{

margin: 0;

padding: 0;

background: #BF3EFF;

}

.title

{

width: 703px;

height: 144px;

position: absolute;

top: 0px;

left: 0px;

background: #BF3EFF;

}

a.back

{

background: #BF3EFF ;

position: fixed;

width: 150px;

height: 27px;

outline: none;

bottom: 0px;

left: 0px;

}

</style>

Step 6: In this step we have to write the script reference to the aspx page; let us see from where you have to write the script code.

Right-click on the selected files respectively -> copy and paste it inside <Head> section of your page; see step 7.

Step 7: Let us see the script code which you have to add inside the <script></script> tags and that will be placed either in the <head> section or the <body> section as you prefer.

Step 8: In this step we have to write the JavaScript code in the <body> tag of our page which is given below.

$('.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();

}

</script>

Step 9: In this step you will see the body code of the Default2.aspx page which is given below.

Code:
<body>

<h2>

<p>

<a href="#">Mahesh Chand</a> <a href="#">Akshay Teotia</a>

</p>

</div>

<h2>

Consulting</h2>

<p>

</p>

</div>

<h2>

Search</h2>

<p>

</p>

</div>

<h2>

C# Corner Home

</h2>

<p>

<a href="http://www.tympanus.net/">Start</a>

</p>

</div>

$('.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();

}

</script>

</body>

Step 10: In this step we will see the complete code of the Default2.aspx page which is given below.

Code:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default2.aspx.cs" Inherits="RoundedMenu.Default2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<title>Rounded Menu Using jQuery</title>

{

margin: 0;

padding: 0;

background: #BF3EFF;

}

.title

{

width: 703px;

height: 144px;

position: absolute;

top: 0px;

left: 0px;

background: #BF3EFF;

}

a.back

{

background: #BF3EFF;

position: fixed;

width: 150px;

height: 27px;

outline: none;

bottom: 0px;

left: 0px;

}

</style>

</head>

<body>

<h2>

<p>

<a href="#">Mahesh Chand</a> <a href="#">Akshay Teotia</a>

</p>

</div>

<h2>

Consulting</h2>

<p>

</p>

</div>

<h2>

Search</h2>

<p>

</p>

</div>

<h2>

C# Corner Home

</h2>

<p>

<a href="http://www.tympanus.net/">Start</a>

</p>

</div>

$('.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();

}

</script>

</body>

</html>

Step 11: In this step we will see the design of the Default2.aspx page which is given below.

Step 12: In this step we are going to run the Default2.aspx page by pressing F5.

Now to see the rounding and expanding effect, click on the small icon.

Nguồn bài viết: Dngaz.com

Bài viết tương tự

BÌNH LUẬN BÀI VIẾT

Bài viết mới nhất

Lộ trình học Lập trình .NET Tóm tắt về JDK 8 đến JDK 21 Xác thực Facebook and Google sử dụng passport trong Node.js Quan hệ 1-1 (One-to-One) trong Dapper ASP.NET Core Razor Pages - Hướng dẫn tạo Project mới Hướng dẫn cách xoá khoảng trắng không mong muốn trong Microsoft Word Tìm hiểu về SOLID - Giải pháp trong phát triển phần mềm Sử dụng xác thực cookie mà không cần ASP.NET Core Identity Hướng dẫn sử dụng ckeditor5 miễn phí trong ASP.NET MVC Core Hướng dẫn Xây dựng Hệ thống Quản lý Tin tức kết hợp giữa ASP.NET MVC Core và Ajax

Xem tất cả

LIKE BOX

Bài viết được xem nhiều nhất

[TUT]Xây dựng Website Bán Hàng - Hướng dẫn tạo DataBase (91304) LẤY LẠI MẬT KHẨU SA TRONG SQL SERVER 2005 2008 (88238) Một số bài tập mẫu SQL(Phân I) (85891) CSS cho các thẻ theo trạng thái (link, hover, visited, active, focus) (79962) Các kiểu dữ liệu SQL (70846) Chuyển đổi giữa các hệ cơ số (70747) Kiểu dữ liệu Array và List trong C# (65488) Xây dựng Lớp Phân Số. Tính toán Cộng, trừ, nhân, chia (58508) Hướng dẫn khắc phục lỗi không tạo được Diagrams(sơ đồ quan hệ) trong SQL 2005/2008 (49909) [Java] Kết nối CSDL từ NetBean (39164)

Xem tất cả

HỌC HTML

Xem tất cả

Học Hệ thống Mạng

Xem tất cả

Điểm nhấn

Thủ thuật

HTML

Rounded Tab Menu Using jQuery and CSS

Rounded Tab Menu Using jQuery and CSS

Bài viết tương tự

Bài viết mới nhất

LIKE BOX

Bài viết được xem nhiều nhất

HỌC HTML

Học Hệ thống Mạng

DotNet Group - Chia sẻ & Kết nối

kiểm tra