CSS论坛's Archiver

divcss5文采 发表于 2011-4-29 17:51

DIV+CSS下拉导航打包下载(JS动画版)

动画效果的DIV+CSS+JS导航-下拉菜单导航
[img]http://www.divcss5.com/uploads/allimg/101011/1_101011105605_1.jpg[/img]

可用于网站栏目导航-网页导航menu

[url=http://www.divcss5.com/template/m224.shtml]CSS下拉菜单[/url]详细介绍:[url]http://www.divcss5.com/template/m224.shtml[/url]
演示地址:[url=http://www.divcss5.com/fanli/divcss下拉导航菜单/]http://www.divcss5.com/fanli/divcss下拉导航菜单/[/url]

DIV+CSS下拉导航菜单.rar

下载地址:
[url=http://d.divcss5.com/divcss5/down/dianxiala.zip]点击下载[/url] 大小23.764KB

java454 发表于 2011-5-4 15:53

回复 1# divcss5文采 的帖子

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>home</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/easySlider1.5.js"></script>
<script type="text/javascript" charset="utf-8">
// <![CDATA[
$(document).ready(function(){       
        $("#slider").easySlider({
                controlsBefore:        '<p id="controls">',
                controlsAfter:        '</p>',
                auto: true,
                continuous: true
        });       
});
// ]]>
</script>
<style type="text/css">
#slider { margin:0; padding:0; list-style:none; }
#slider ul,
#slider li { margin:0; padding:0; list-style:none; }
/*
    define width and height of list item (slide)
    entire slider area will adjust according to the parameters provided here
*/
#slider li { width:906px; height:386px; overflow:hidden; }
p#controls { margin:0; position:relative; }
#prevBtn,
#nextBtn { display:block; margin:0; overflow:hidden; width:44px; height:44px; position:absolute; left:0; top:-250px; }
#nextBtn { left:862px; }
#prevBtn a { display:block; width:44px; height:44px; background:url(images/l_arrow.gif) no-repeat 0 0; }
#nextBtn a { display:block; width:44px; height:44px; background:url(images/r_arrow.gif) no-repeat 0 0; }
</style>
</head>
<body>
<div class="main">
  <div class="header">
    <div class="block_header">
      <div class="logo"><a href="index.html"><img src="images/logo.gif" width="401" height="145" border="0" alt="logo" /></a></div>
      <div class="menu">
        <ul>
          <li><a href="index.html" class="active">Home</a></li>
          <li><a href="services.html">Services</a></li>
          <li><a href="services.html">About us</a></li>
          <li><a href="portfolio.html">Portfolio</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </div>
      <div class="clr"> </div>
    </div>
  </div>
  <div class="slider">
    <div class="slice1">
      <div id="slider">
        <ul>
          <li>
            <div class="top" style="background:url(images/sliser_bg_img_1.jpg) top no-repeat;">
              <h2><a href="http://www.divcss5.com/">CSS</a> Dummy text of the printing and typesetting industry.</h2>
              <p>Lorem Ipsum has been the industry's standard dummy text ever since the when an unknown printer. <a href="#">Simply dummy text of the printing</a> and typesetting industry. Lorem Ipsum has been the industry's </p>
            </div>
            <div class="bot">
            <div class="lister">
                <p class="active">1</p>
                <p>2</p>
                <p>3</p>
              </div>
              <h2>Simply dummy text</h2>
              <p>Lorem Ipsum has been the industry's standard dummy text ever since.</p>
            </div>
          </li>
          <li>
            <div class="top" style="background:url(images/sliser_bg_img_2.jpg) top no-repeat;">
              <h2>Dummy text of the printing and typesetting industry.</h2>
              <p>Lorem Ipsum has been the industry's standard dummy text ever since the when an unknown printer. <a href="#">Simply dummy text of the printing</a> and typesetting industry. Lorem Ipsum has been the industry's </p>
            </div>
            <div class="bot">
            <div class="lister">
                <p>1</p>
                <p class="active">2</p>
                <p>3</p>
              </div>
              <h2>Simply dummy text</h2>
              <p>Lorem Ipsum has been the industry's standard dummy text ever since.</p>
            </div>
          </li>
          <li>
            <div class="top" style="background:url(images/sliser_bg_img_3.jpg) top no-repeat;">
              <h2>Dummy text of the printing and typesetting industry.</h2>
              <p>Lorem Ipsum has been the industry's standard dummy text ever since the when an unknown printer. <a href="#">Simply dummy text of the printing</a> and typesetting industry. Lorem Ipsum has been the industry's </p>
            </div>
            <div class="bot">
            <div class="lister">
                <p>1</p>
                <p>2</p>
                <p class="active">3</p>
              </div>
              <h2>Simply dummy text</h2>
              <p>Lorem Ipsum has been the industry's standard dummy text ever since.</p>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>  
  <div class="body">
    <div class="body_resize">
      <div class="Author">
        <h2>About the Author</h2>
        <img src="images/img_1.gif" alt="picture" width="97" height="89" hspace="20" vspace="5" />
        <p>Lorem Ipsum has been the industry's standard dummy text ever since thes, when an unknown printer.<a href="#"> Simply dummy text</a> of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since thes, when an unknown printer.</p>
        <p><a href="#"><img src="images/read_more.gif" alt="picture" width="68" height="20" border="0" /></a></p>
      </div>
      <div class="animator">
        <p><img src="images/img_4.gif" alt="picture" width="169" height="126" /> <img src="images/img_3.gif" alt="picture" width="169" height="126" /><img src="images/img_2.gif" alt="picture" width="170" height="126" /></p>
        <h2>Dummy text of the printing and typesetting industry.</h2>
        <p>Lorem Ipsum has been the industry's standard dummy text ever since thes,<a href="#"> when an unknown printer. Simply dummy text</a> of the printing and typesetting industry. </p>
      </div>
      <div class="clr"></div>
    </div>
    <div class="clr"></div>
  </div>
  <div class="FBG">
    <div class="Fbg_resize">
      <div class="Twitter">
        <p><img src="images/Twitter.gif" alt="picture" width="129" height="96" /></p>
        <p><strong>Lorem Ipsum has been</strong> The industry's standard dummy text ever since thes. <a href="#"><img src="images/read_more.gif" alt="picture" width="68" height="20" border="0" /></a></p>
      </div>
      <div class="con">
        <h2>Contact us</h2>
        <ul>
          <li>Name of the Company</li>
          <li> 2901 Marmora Road, Glassgow, D04 59GR</li>
          <li> Telephone: +1 234 567 8910</li>
        </ul>
        <ul>
          <li>FAX: +1 234 567 8910</li>
          <li>E-mail: <a href="#">mail@yoursitename.com</a></li>
        </ul>
      </div>
    </div>
    <div class="clr"></div>
  </div>
  <div class="footer">
    <div class="resize">
      <div>Copyright © Sitename.com. <a href="http://www.divcss5.com/">DIV+CSS</a>. All Rights Reserved<br />
        <a href="index.html">Home</a> | <a href="contact.html">Contact</a> | <a href="blog.html">RSS</a></div>
    </div>
    <p class="clr"></p>
  </div>
</div>
</body>
</html>

zapshl 发表于 2011-5-4 19:35

太好了.就要这个例子.

qweqwe 发表于 2011-5-5 10:06

下载试下

58436211 发表于 2011-5-5 15:15

好东西啊

cfang2005 发表于 2011-5-9 14:54

看一下                  :lol

shunshun_10 发表于 2011-5-11 13:18

很好

:loveliness: :loveliness: :loveliness: :loveliness:

dmgyswf 发表于 2011-5-13 09:52

这个菜单效果不错,赞一个

290678391 发表于 2011-5-16 13:17

可以可以

xfl515 发表于 2011-5-16 16:11

好啊 !!!!!顶起来

admin1225 发表于 2011-5-16 18:24

太好了啊

wangpei 发表于 2011-5-18 17:49

看看,学习一下

1ling 发表于 2011-5-19 16:31

非常的需要

kmyyh0000 发表于 2011-5-23 12:13

111111111111111111111111

yuyu 发表于 2011-5-23 17:30

fewf

fwhgewgwerf wwgwfewrfwef

hzsxyhzc 发表于 2011-5-24 11:31

看看看看哪款哪款

jakes1985 发表于 2011-5-24 12:56

hello word

sunjiuzi 发表于 2011-5-27 10:04

貌似就是我也找的,,不知道行不行呀

刘晓备 发表于 2011-5-27 12:30

谢谢你拉啊

fengkuangtiaowu 发表于 2011-5-28 09:54

求打包,谢谢!

求打包,谢谢!求打包,谢谢!

页: [1] 2 3 4 5 6 7 8 9 10

Powered by Discuz! Archiver 6.1.0  © 2001-2007 Comsenz Inc.