精华内容
下载资源
问答
  • 横向菜单

    2011-06-06 15:32:00
    . . . . <HTML> <HEAD> <META http-equiv="Content-Type"...横向菜单</TITLE> <STYLE type="text/css"&a

    .

    .

    .

    .

    2011060615315021.jpg

    <HTML>
    <HEAD>
    <META http-equiv="Content-Type" content="text/html; charset=gb2312">
    <TITLE>横向菜单</TITLE>
    <STYLE type="text/css">
    td {
    	FONT-SIZE: 13px; COLOR: #000000; LINE-HEIGHT: 22px;
    }
    div{/*设置层背景样式*/
    background-color:#669933;
    text-align:center;position:absolute;z-index:2;display:none; }
    A {FONT-SIZE: 13px; COLOR: #FFFFFF; TEXT-DECORATION: none;
    /*文字链接的背影样式*/
    background-color:#669933;
    width:100px;line-height:22px;text-align:center;border-bottom:1 #FFFFFF solid;}
    A:hover {FONT-SIZE: 13px; COLOR: #ffffff;
    /*鼠标在文字链接上时的文字背景样式*/
    background-color:#FE9D01;
    width:100px;line-height:22px;text-align:center;}
    
    </STYLE>
    <SCRIPT language="JavaScript">
    function show(d1){
    document.getElementById(d1).style.display='block';  //显示层
    }
    
    function hide(d1){
    document.getElementById(d1).style.display='none';  //隐藏层
    }
    </SCRIPT>
    </HEAD>
    <BODY>
    <TABLE width="303" border="0" cellspacing="0" cellpadding="0" align="center">
    <TR>
        <TD><A href="#"  onMouseMove="show(1)" onMouseOut="hide(1)">手机数码</A></TD>
        <TD><A href="#" onMouseMove="show(2)" onMouseOut="hide(2)">淘宝集市</A></TD>
        <TD><A href="#" onMouseMove="show(3)" onMouseOut="hide(3)">品牌商城</A></TD>
     </TR>
      <TR>
        <TD><DIV  id="1" onMouseMove="show(1)" onMouseOut="hide(1)"><A href="#">手机数码1</A><BR><A href="#">手机数码2</A><BR><A href="#">手机数码3</A></DIV></TD>
        <TD><DIV  id="2"    onMouseMove="show(2)" onMouseOut="hide(2)"><A href="#">淘宝集市1</A><BR><A href="#">淘宝集市2</A><BR><A href="#">淘宝集市3</A></DIV></TD>
        <TD><DIV  id="3"    onMouseMove="show(3)" onMouseOut="hide(3)"><A href="#">品牌商城1</A><BR><A href="#">品牌商城2</A><BR><A href="#">品牌商城3</A></DIV></TD>
      </TR></TABLE>
    <TABLE width="610" border="0" cellspacing="0" cellpadding="0" align="center">
      <TR>
        <TD>定位你的网站CI形象 
          <P>所谓CI,是借用的广告术语。(CI是英文corporate identity的缩写),意思是通过视觉来统一企业的形象。现实生活中的CI策划比比皆是,杰出的例子如:可口可乐公 
            司,全球统一的标志,色彩和产品包装,给我们的印象极为深刻。更多的例子如SONY,三菱,麦当劳等等。 </P>
          <P>一个杰出的网站,和实体公司一样,也需要整体的形象包装和设计。准确的,有创意的CI 设计,对网站的宣传推广有事半功倍的效果。在您的网站主题和名称定下来之后,需要思考的就是网站的CI形象。 
          </P>
          <P>有网友要问了:我不是学广告专业的,CI对我来说可能太难了吧:( 不用担心,阿捷自己也没有学过设计专业哦。大家只要参考我的一些具体做法和经验,很容易将自己网站的CI搞定:) 
          </P>
          <P>1.设计网站的标志(logo).首先你需要设计制作一个网站的标志(logo)。就如同商标一样,logo是你站点特色和内涵的集中体现,看见logo就让大家联想起你的站点。注意:这里的logo不是指88X31的小图标banner,而是网站的标志。 
          </P>
          <P>标志可以是中文,英文字母,可以是符号,图案,可以是动物或者人物等等。比如:soim是用soim的英文作为标志,新浪用字母sina+眼睛作为标志。标志的设计创意来自你网站的名称和内容。 
          </P>
          <P>(1).网站有代表性的人物,动物,花草,可以用它们作为设计的蓝本,加以卡通化和艺术化,例如迪斯尼的米老鼠,搜狐的卡通狐狸,鲨威体坛的篮球鲨鱼。 
          </P>
          <P>(2).网站有专业性的,可以以本专业有代表的物品作为标志。比如中国银行的铜板标志,奔驰汽车的方向盘标志。 </P>
          <P>(3).最常用和最简单的方式是用自己网站的英文名称作标志。采用不同的字体, 字母的变形,字母的组合可以很容易制作好自己的标志。 </P>
          <P>2.设计网站的标准色彩。网站给人的第一印象来自视觉冲击,确定网站的标准色彩是相当重要的一步。不同的色彩搭配产生不同的效果,并可能影响到访问者的情绪。 
          </P>
          <P>“标准色彩”是指能体现网站型象和延伸内涵的色彩。举个实际的例子就明白了:IBM的深蓝色,肯得基的红色条型,windows视窗标志上的红蓝黄绿色块,都使我们觉得很贴切,很和谐。如果将IBM改用绿色或金黄色,我们会有什么感觉? 
          </P>
          <P>一般来说,一个网站的标准色彩不超过3种,太多则让人眼花缭乱。标准色彩要用于网站的标志,标题,主菜单和主色块。给人以整体统一的感觉。至于其它色彩也可以使用,只是作为点缀和衬托,绝不能喧宾夺主。 
          </P>
          <P>一般来说,适合于网页标准色的颜色有:蓝色,黄/橙色,黑/灰/白色三大系列色。(注:关于色彩搭配的具体方法,我们会在本系列文章的第八篇介绍)。 
          </P>
          <P>3.设计网站的标准字体。和标准色彩一样,标准字体是指用于标志,标题,主菜单的特有字体。一般我们网页默认的字体是宋体。为了体现站点的“与众不同”和特有风格,我们可以根据需要选择一些特别字体。例如,为了体现专业可以使用粗仿宋体,体现设计精美可以用广告体,体现亲切随意可以用手写体等等。当然这些都是阿捷的个人看法,你可以根据自己网站所表达的内涵,选择更贴切的字体。目前常见的中文字体有二三十种,常见的英文字体有近百种,网络上还有许多专用英文艺术字体下载,要寻找一款满意的字体并不算困难:) 
          </P>
          <P>需要说明的是:使用非默认字体只能用图片的形式,因为很可能浏览者的PC里没有安装你的特别字体,那么您的辛苦设计制作便付之东流啦! </P>
          <P>4.设计网站的宣传标语。也可以说是网站的精神,网站的目标。用一句话甚至一个词来高度概括。类似实际生活中的广告金句。例如:鹊巢的“味道好极了”;麦斯威尔的“好东西和好朋友一起分享”;Intel的“给你一个奔腾的心”。 
          </P>
          <P>以上四方面:标志,色彩,字体,标语,是一个网站树立CI形象的关键,确切的说是网站的表面文章,设计并完成这几步,你的网站将脱胎换骨,整体形象有一个提高。形象地说:你从一个土气的农民转变为一位西装革履的白领人士。(注意:我们只是以平面静态来设计CI,还没有引入声音,三维立体等因素。) 
          </P>
          <P>好了,看了以上的介绍,你应该对网站CI有了一个初步的概念。也许不是很明白,因为那些道理太抽象了,你可能需要一些实际的,更生动的例子。阿捷会在自己的主页上同时修改补充一些实例。下一节,我们来讨论“确定网站的栏目版块”,欢迎您参与,谢谢! 
          </P>
          <P>确定网站的栏目和版块 </P>
          <P>《设计的思考》系列文章,今天开始写第三篇。阿捷不是专业的网页设计师,但阿捷将尽自己所能把这个系列文章写好,尽可能将自己实践过程中总结的经验和心得告诉给大家,希望能给您一点收获,一点启发。文章中所列观点如有不同意见,欢迎您来信讨论,来信寄ajie@soim.com,谢谢。 
          </P>
          <P>我们在前二篇文章里学习了定位网站主题和确立网站的CI形象。下面是否该进入实质性的设计制作阶段呢?答案是:不能。经验告诉我们,建立一个网站好比写一篇文章,首先要拟好提纲,文章才能主题明确,层次清晰;也好比造一座高楼,首先要设计好框架图纸,才能使楼房结构合理。 
          </P>
          <P>初学者(包括我自己:-),最容易犯的错误就是:确定题材后立刻开始制作。当你一页一页制作完毕后才发现:网站结构不清晰,目录庞杂,内容东一块西一块。结果不但浏览者看得糊涂,自己扩充和维护网站也相当困难,您的网站或许就此半途而废,更糟糕的是:你因此失去了制作主页的信心和兴趣! 
          </P>
          <P>所以,我们在动手制作网页前,一定要考虑好以下三方面: </P>
          <P>1.确定栏目和版块; <BR>
            2.确定网站的目录结构和链接结构 <BR>
            3.确定网站的整体风格创意设计 <BR>
            今天我们首先来讨论“确定网站的栏目和版块”。 </P>
          <P>网站的题材确定后,相信你已经收集和组织了许多相关的资料内容。你一定认为这些都是最好的,肯定能吸引网友们来浏览网站。但是你有没有将最好的,最吸引人的内容放在最突出的位置呢?有没有让好东西在版面分布上占绝对优势呢? 
          </P>
          <P>我看见许多个人主页的栏目(主菜单)并不是这样的。举个例子:有一个以提供动画素材为主题的站点,它的主栏目是:关于站长,本站导航,动画宝库,本站论坛,本站留言本,联系站长。首页上写着本站网址和版权申明(居然还有将本站设为首页字样)。最主要的,最吸引人的动画素材在主栏目里占1/6,在首页上一字没提。我想即使这个站点的确有大量的,精美的动画素材,也很难吸引浏览者继续挖掘。 
          </P>
          <P>栏目的实质是一个网站的大纲索引,索引应该将网站的主体明确显示出来。在制定栏目的时候,要仔细考虑,合理安排。一般的网站栏目安排要注意以下几方面: 
          </P>
          <P>1.一定记住要紧扣你的主题! </P>
          <P>一般的做法是:将你的主题按一定的方法分类并将它们作为网站的主栏目。例如上面的例子,可以将栏目分为动物动画,标志动画,三维动画,卡通动画等,在首页上标明最近更新的动画。记住:主题栏目个数在总栏目中要占绝对优势,这样的网站显的专业,主题突出,容易给人留下深刻印象。 
          </P>
          <P>2.设一个最近更新或网站指南栏目 </P>
          <P>如果你的首页没有安排版面放置最近更新内容信息,就有必要设立一个“最近更新”的栏目。这样做是为了照顾常来的访客,让你的主页更有人性化。 </P>
          <P>如果你的主页内容庞大(超过15MB),层次较多,而又没有站内的搜索引擎,建议您设置“本站指南”栏目。可以帮助初访者快速找到他们想要的内容。 
          </P>
          <P>3.设定一个可以双向交流的栏目 </P>
          <P>不需要很多,但一定要有。比如论坛,留言本,邮件列表等,可以让浏览者留下他们的信息。有调查表明,提供双向交流的站点比简单的留一个"Email 
            me"的站点更具有亲和力。 </P>
          <P>4.设一个下载或常见问题回答栏目 </P>
          <P>网络的特点是信息共享。如果你看到一个站点有大量的优秀的有价值的资料,你肯定希望能一次性下载,而不是一页一页浏览存盘。“将心比心”在你自己的主页上设置一个资料下载栏目,会得到大家的喜欢。有些站点为了广告显示量,一篇文章还要分几页显示,我觉得迟早会因访问量下降而淘汰(个人意见:)。另外,如果您的站点经常收到网友关于某方面的问题来信,你最好设立一个常见问题回答的栏目,既方便了网友,也可以节约自己更多时间用以学习。 
          </P>
          <P>至于其他的辅助内容,如关于本站,版权信息等可以不放在主栏目里,以免冲淡主题。总结以上几点,我们得出划分栏目需要注意的是: </P>
          <P>●尽可能删除与主题无关的栏目 <BR>
            ●尽可能将网站最有价值的内容列在栏目上 <BR>
            ●尽可能方便访问者的浏览和查询 </P>
          <P>上面说的是栏目,我们再看看版块设置。版块比栏目的概念要大一些,每个版块都有自己的栏目。举个例子:网易的站点分新闻,体育,财经,娱乐,教育等版块,每个版块下面有各有自己的主栏目。一般的个人站点内容少,只有主栏目(主菜单)就够了,不需要设置版块。如果你觉得的确有必要设置版块的,应该注意1.各版块要有相对独立性。2.各版块要有相互关联。3.版块的内容要围绕站点主题。关于版块方面,主要是门户站点等较大ICP需要考虑的问题,阿捷在此不再作展开讨论。<BR>
          </P></TD>
      </TR>
      </TABLE>
    </BODY>
    </HTML>
    
    展开全文
  • 横向菜单 水平菜单 后台模板 颜色偏浅 bootstrap+html+css
  • 主要介绍了Jquery实现纵向横向菜单的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 就比如今天要介绍的一款CSS3 3D横向菜单,整个菜单栏会随着鼠标移动而倾斜,产生一种3D立体的视觉效果,同时鼠标滑过菜单项时,菜单项也会凸出显示,是一款非常华丽而具有个性化的CSS3菜单导航插件。
  • PAGE / NUMPAGES 如何用CSS制作横向菜单 让ul li横向排列及圆点处理 ? 我们先建立一个无序列表来建立强化美术培训学校导航菜单的结构代码是 <div class="test<ul> 首 页资料个人收集整理勿做商业用途 ...
  • iOS 横向菜单

    2015-05-05 09:53:00
    比较难实现的是横向菜单,因为没有直接的控件可以用。开始我想用之前的方法,将TableView和TableViewCell倒置,实现横向TableView;但是会出现一个问题,每个Cell中的文本,都被省略显示,类似显示“...

     MKHorizMenu 源码地址 

    现在想要实现以下效果,其中“选时间”这部分是一个NavigationBar,“日期”是横向的菜单,“电影时段”是TableView。

    比较难实现的是横向菜单,因为没有直接的控件可以用。开始我想用之前的方法,将TableView和TableViewCell倒置,实现横向TableView;但是会出现一个问题,每个Cell中的文本,都被省略显示,类似显示“2月...”。

    原因是,在倒置TableView之前,TableView的宽很小(相当于图中横向菜单的高),那么文本写在上面就会被省略显示,虽然TableView倒置过来了,但是文本还是原来的文本,并没有因为倒置后宽变长了而全部显示。

    只能试试别的方法,发现MKHorizMenu这个开源库。

     

    MKHorizMenu的实现原理是将UISrollView封装,声明DataSource协议和Delegate协议。详见。由于自带Demo是使用nib,所以我在MKHorizMenu.m中将初始化方法awakeFromNib改为initWithFrame。

    //
    //  MKHorizMenu.h
    //  MKHorizMenuDemo
    //
    //  Created by Mugunth on 09/05/11.
    //  Copyright 2011 Steinlogic. All rights reserved.
    
    //  Permission granted to do anything, commercial/non-commercial with this file apart from removing the line/URL above
    //  Read my blog post at http://mk.sg/8h on how to use this code
    
    //  As a side note on using this code, you might consider giving some credit to me by
    //    1) linking my website from your app's website
    //    2) or crediting me inside the app's credits page
    //    3) or a tweet mentioning @mugunthkumar
    //    4) A paypal donation to mugunth.kumar@gmail.com
    //
    //  A note on redistribution
    //    While I'm ok with modifications to this source code,
    //    if you are re-publishing after editing, please retain the above copyright notices
    
    #import <UIKit/UIKit.h>
    
    @class MKHorizMenu;
    
    @protocol MKHorizMenuDataSource <NSObject>
    @required
    - (UIImage*)selectedItemImageForMenu:(MKHorizMenu*)tabView;
    - (UIColor*)backgroundColorForMenu:(MKHorizMenu*)tabView;
    - (NSUInteger)numberOfItemsForMenu:(MKHorizMenu*)tabView;
    
    - (NSString*)horizMenu:(MKHorizMenu*)horizMenu titleForItemAtIndex:(NSUInteger)index;
    @end
    
    @protocol MKHorizMenuDelegate <NSObject>
    @required
    - (void)horizMenu:(MKHorizMenu*)horizMenu itemSelectedAtIndex:(NSUInteger)index;
    @end
    
    @interface MKHorizMenu : UIScrollView
    {
    
        int _itemCount;
        UIImage* _selectedImage;
        NSMutableArray* _titles;
        id<MKHorizMenuDataSource> dataSource;
        id<MKHorizMenuDelegate> itemSelectedDelegate;
    }
    
    @property (nonatomic, retain) NSMutableArray* titles;
    @property (nonatomic, retain) id<MKHorizMenuDelegate> itemSelectedDelegate;
    @property (nonatomic, retain) id<MKHorizMenuDataSource> dataSource;
    @property (nonatomic, retain) UIImage* selectedImage;
    @property (nonatomic, assign) int itemCount;
    
    - (void)reloadData;
    - (void)setSelectedIndex:(int)index animated:(BOOL)animated;
    @end
    MKHorizMenu.h

     

    //
    //  MKHorizMenu.m
    //  MKHorizMenuDemo
    //  Created by Mugunth on 09/05/11.
    //  Copyright 2011 Steinlogic. All rights reserved.
    //  Permission granted to do anything, commercial/non-commercial with this file apart from removing the line/URL above
    //  Read my blog post at http://mk.sg/8h on how to use this code
    
    //  As a side note on using this code, you might consider giving some credit to me by
    //    1) linking my website from your app's website
    //    2) or crediting me inside the app's credits page
    //    3) or a tweet mentioning @mugunthkumar
    //    4) A paypal donation to mugunth.kumar@gmail.com
    //
    //  A note on redistribution
    //    While I'm ok with modifications to this source code,
    //    if you are re-publishing after editing, please retain the above copyright notices
    
    #import "MKHorizMenu.h"
    #define kButtonBaseTag 10000
    #define kLeftOffset 10
    
    @implementation MKHorizMenu
    
    @synthesize titles = _titles;
    @synthesize selectedImage = _selectedImage;
    
    @synthesize itemSelectedDelegate;
    @synthesize dataSource;
    @synthesize itemCount = _itemCount;
    
    /**
     *    @author Norcy, 15-05-03
     *
     *    Change awakeFormNib to function below
     *
     *    @param frame
     *
     *    @return
     */
    - (id)initWithFrame:(CGRect)frame
    {
        if (self = [super initWithFrame:frame])
        {
            self.bounces = YES;
            self.scrollEnabled = YES;
            self.alwaysBounceHorizontal = YES;
            self.alwaysBounceVertical = NO;
            self.showsHorizontalScrollIndicator = NO;
            self.showsVerticalScrollIndicator = NO;
    //        [self reloadData];
        }
        return self;
    }
    
    - (void)reloadData
    {
        NSArray* viewsToRemove = [self subviews];
        for (UIView* v in viewsToRemove)
        {
            [v removeFromSuperview];
        }
    
        self.itemCount = [dataSource numberOfItemsForMenu:self];
    //    self.backgroundColor = [dataSource backgroundColorForMenu:self];    //Norcy
        self.selectedImage = [dataSource selectedItemImageForMenu:self];
    
        UIFont* buttonFont = [UIFont systemFontOfSize:15];
        int buttonPadding = 45;
    
        int tag = kButtonBaseTag;
        int xPos = kLeftOffset;
    
        for (int i = 0; i < self.itemCount; i++)
        {
            NSString* title = [dataSource horizMenu:self titleForItemAtIndex:i];
            UIButton* customButton = [UIButton buttonWithType:UIButtonTypeCustom];
            [customButton setTitle:title forState:UIControlStateNormal];
            customButton.titleLabel.font = buttonFont;
    
    //        [customButton setBackgroundImage:self.selectedImage forState:UIControlStateSelected];    //Norcy
            [customButton setTitleColor:[UIColor grayColor] forState:UIControlStateNormal];            //Norcy
            [customButton setTitleColor:[UIColor orangeColor] forState:UIControlStateSelected];        //Norcys
            customButton.tag = tag++;
            [customButton addTarget:self action:@selector(buttonTapped:) forControlEvents:UIControlEventTouchUpInside];
    
    //        int buttonWidth = [title sizeWithFont:customButton.titleLabel.font
    //                              constrainedToSize:CGSizeMake(150, 28)
    //                                  lineBreakMode:UILineBreakModeClip].width;
            
            int buttonWidth = [title boundingRectWithSize:CGSizeMake(150, 28) options:NSStringDrawingUsesLineFragmentOrigin    attributes:nil context:nil].size.width;
    
            customButton.frame = CGRectMake(xPos, 7, buttonWidth + buttonPadding, 28);
            xPos += buttonWidth;
            xPos += buttonPadding;
            [self addSubview:customButton];
        }
    
        // bretdabaker: added right padding to contentSize
        xPos += kLeftOffset;
    
        self.contentSize = CGSizeMake(xPos, 41);
        [self layoutSubviews];
    }
    
    - (void)setSelectedIndex:(int)index animated:(BOOL)animated
    {
        UIButton* thisButton = (UIButton*)[self viewWithTag:index + kButtonBaseTag];
        thisButton.selected = YES;
        [self setContentOffset:CGPointMake(thisButton.frame.origin.x - kLeftOffset, 0) animated:animated];
        [self.itemSelectedDelegate horizMenu:self itemSelectedAtIndex:index];
    }
    
    - (void)buttonTapped:(id)sender
    {
        UIButton* button = (UIButton*)sender;
    
        for (int i = 0; i < self.itemCount; i++)
        {
            UIButton* thisButton = (UIButton*)[self viewWithTag:i + kButtonBaseTag];
            if (i + kButtonBaseTag == button.tag)
                thisButton.selected = YES;
            else
                thisButton.selected = NO;
        }
    
        [self.itemSelectedDelegate horizMenu:self itemSelectedAtIndex:button.tag - kButtonBaseTag];
    }
    
    @end
    MKHorizMenu.m

     

    以下为Demo,调用MKHorizMenu的过程请直接看ViewController2.m。

    //
    //  AppDelegate.m
    //  Tickets
    //
    //  Created by Norcy on 15/4/29.
    //  Copyright (c) 2015年 Norcy. All rights reserved.
    //
    
    #import "AppDelegate.h"
    #import "ViewController2.h"
    @interface AppDelegate ()
    
    @end
    
    @implementation AppDelegate
    
    - (BOOL)application:(UIApplication*)application didFinishLaunchingWithOptions:(NSDictionary*)launchOptions
    {
        // Override point for customization after application launch.
        self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
        ViewController2 *vc = [[ViewController2 alloc] init];
        UINavigationController *nav = [[UINavigationController alloc]initWithRootViewController:vc];
        nav.view.backgroundColor = [UIColor whiteColor];
        self.window.rootViewController = nav;
        [self.window makeKeyAndVisible];
        return YES;
    }
    
    - (void)applicationWillResignActive:(UIApplication*)application
    {
        // Sent when the application is about to move from active to inactive state. This can occur for certain types of temporary interruptions (such as an incoming phone call or SMS message) or when the user quits the application and it begins the transition to the background state.
        // Use this method to pause ongoing tasks, disable timers, and throttle down OpenGL ES frame rates. Games should use this method to pause the game.
    }
    
    - (void)applicationDidEnterBackground:(UIApplication*)application
    {
        // Use this method to release shared resources, save user data, invalidate timers, and store enough application state information to restore your application to its current state in case it is terminated later.
        // If your application supports background execution, this method is called instead of applicationWillTerminate: when the user quits.
    }
    
    - (void)applicationWillEnterForeground:(UIApplication*)application
    {
        // Called as part of the transition from the background to the inactive state; here you can undo many of the changes made on entering the background.
    }
    
    - (void)applicationDidBecomeActive:(UIApplication*)application
    {
        // Restart any tasks that were paused (or not yet started) while the application was inactive. If the application was previously in the background, optionally refresh the user interface.
    }
    
    - (void)applicationWillTerminate:(UIApplication*)application
    {
        // Called when the application is about to terminate. Save data if appropriate. See also applicationDidEnterBackground:.
    }
    
    @end
    AppDelegate.m

     

    //
    //  ViewController2.h
    //  Tickets
    //
    //  Created by Norcy on 15/4/30.
    //  Copyright (c) 2015年 Norcy. All rights reserved.
    //
    
    #import <UIKit/UIKit.h>
    #import "MKHorizMenu.h"
    
    @interface ViewController2 : UIViewController<UITableViewDataSource, UITableViewDelegate, MKHorizMenuDataSource, MKHorizMenuDelegate>
    {
        MKHorizMenu *_horizMenu;    //顶部导航条
        NSInteger lastSelectedBtnIndex;
    }
    @property NSArray *items;
    @end
    ViewController2.h

     

    //
    //  ViewController2.m
    //  Tickets
    //
    //  Created by Norcy on 15/4/30.
    //  Copyright (c) 2015年 Norcy. All rights reserved.
    //
    
    #import "ViewController2.h"
    #import "TableViewCell2.h"
    
    @interface ViewController2 ()
    
    @end
    
    #define kButtonBaseTag 10000
    #define HORIZONMENU_HEIGHT 44
    static NSString* CELL_ID = @"MyCell";
    
    @implementation ViewController2
    
    - (void)viewDidLoad
    {
        [super viewDidLoad];
    
        //Navigation
        self.title = @"选时间";
        self.edgesForExtendedLayout = UIRectEdgeNone;
    
        //Screen
        int screenWidth = [[UIScreen mainScreen] bounds].size.width;
        int screenHeight = [[UIScreen mainScreen] bounds].size.height;
        
        self.items = [NSArray arrayWithObjects:@"今天", @"2月11日", @"2月12日", @"2月13日", @"2月14日", @"2月15日", @"2月16日", nil];
        lastSelectedBtnIndex = -1;
        
        //Horizon Menu
        MKHorizMenu *horizMenu = [[MKHorizMenu alloc] initWithFrame:CGRectMake(0, 0, screenWidth, HORIZONMENU_HEIGHT)];
        horizMenu.dataSource = self;
        horizMenu.itemSelectedDelegate = self;
        horizMenu.backgroundColor = [UIColor whiteColor];
        [horizMenu reloadData];
        [self.view addSubview:horizMenu];
        [self horizMenu:horizMenu itemSelectedAtIndex:0];    //必须写在reloadData和addSubview:horizMenu后面
        
        //TableView
        UITableView* tableView = [[UITableView alloc] initWithFrame:CGRectMake(0, horizMenu.frame.size.height, screenWidth, screenHeight - HORIZONMENU_HEIGHT - self.navigationController.navigationBar.frame.size.height - 20)];
        [tableView registerClass:[TableViewCell2 class] forCellReuseIdentifier:CELL_ID];
        tableView.delegate = self;
        tableView.dataSource = self;
        [self.view addSubview:tableView];
    }
    
    #pragma mark
    #pragma mark TableView Data Source
    - (NSInteger)numberOfSectionsInTableView:(UITableView*)tableView
    {
        return 1;
    }
    
    - (NSInteger)tableView:(UITableView*)tableView numberOfRowsInSection:(NSInteger)section
    {
        return 10;
    }
    
    - (UITableViewCell*)tableView:(UITableView*)tableView cellForRowAtIndexPath:(NSIndexPath*)indexPath
    {
        TableViewCell2* cell = [tableView dequeueReusableCellWithIdentifier:CELL_ID forIndexPath:indexPath];
        cell.backgroundColor = [UIColor colorWithRed:0.95 green:0.95 blue:0.95 alpha:1];
        return cell;
    }
    
    - (CGFloat)tableView:(UITableView*)tableView heightForRowAtIndexPath:(NSIndexPath*)indexPath
    {
        return 80;
    }
    
    - (CGFloat)tableView:(UITableView*)tableView heightForHeaderInSection:(NSInteger)section
    {
        return 0;
    }
    
    #pragma mark
    #pragma mark TableView Delegate
    - (void)tableView:(UITableView*)tableView didSelectRowAtIndexPath:(NSIndexPath*)indexPath
    {
        [tableView deselectRowAtIndexPath:indexPath animated:YES];
    }
    
    #pragma mark
    #pragma mark MKHorizMenu DataSource
    - (UIImage*)selectedItemImageForMenu:(MKHorizMenu*)tabView
    {
        return nil;
    }
    
    - (UIColor*)backgroundColorForMenu:(MKHorizMenu*)tabView
    {
        return [UIColor clearColor];
    }
    
    - (NSUInteger)numberOfItemsForMenu:(MKHorizMenu*)tabView
    {
        return [self.items count];
    }
    
    - (NSString*)horizMenu:(MKHorizMenu*)horizMenu titleForItemAtIndex:(NSUInteger)index
    {
        return [self.items objectAtIndex:index];
    }
    
    #pragma mark
    #pragma mark MKHorizMenu Delegate
    - (void)horizMenu:(MKHorizMenu*)horizMenu itemSelectedAtIndex:(NSUInteger)index
    {
        if (lastSelectedBtnIndex != -1)
        {
            UIButton *lastButton = (UIButton*) [self.view viewWithTag:lastSelectedBtnIndex+kButtonBaseTag];
            lastButton.selected = NO;
        }
        UIButton *thisButton = (UIButton*) [self.view viewWithTag:index+kButtonBaseTag];
        thisButton.selected = YES;
        lastSelectedBtnIndex = index;
    }
    @end
    ViewController2.m

     

    //
    //  TableViewCell2.h
    //  Tickets
    //
    //  Created by Norcy on 15/4/30.
    //  Copyright (c) 2015年 Norcy. All rights reserved.
    //
    
    #import <UIKit/UIKit.h>
    
    @interface TableViewCell2 : UITableViewCell
    @property (nonatomic, strong) UILabel *showTime;
    @property (nonatomic, strong) UILabel *VIPPrice;
    @property (nonatomic, strong) UILabel *Detail;
    @property (nonatomic, strong) UILabel *Price;
    @end
    TableViewCell2.h

     

    //
    //  TableViewCell2.m
    //  Tickets
    //
    //  Created by Norcy on 15/4/30.
    //  Copyright (c) 2015年 Norcy. All rights reserved.
    //
    
    #import "TableViewCell2.h"
    
    #define kCellEdgeInset 20
    #define kCellInset 10
    #define kLeftLabelWidth 180
    #define kLeftLabelHeight 20
    
    @implementation TableViewCell2
    
    - (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
    {
        self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
        if (self)
        {
            //Screen
            int screenWidth = [[UIScreen mainScreen] bounds].size.width;
            
            _showTime = [[UILabel alloc]initWithFrame:CGRectMake(kCellEdgeInset, kCellEdgeInset, kLeftLabelWidth, kLeftLabelHeight)];
            _showTime.text = @"12:30-14:00";
            _showTime.font = [UIFont systemFontOfSize:14];
            
            _VIPPrice = [[UILabel alloc]initWithFrame:CGRectMake(kCellEdgeInset+kLeftLabelWidth, _showTime.frame.origin.y, screenWidth-kLeftLabelWidth-kCellEdgeInset*2, kLeftLabelHeight)];
            _VIPPrice.text = @"会员价¥9.9";
            _VIPPrice.textAlignment = NSTextAlignmentRight;
            _VIPPrice.font = [UIFont systemFontOfSize:12];
            
            _Detail = [[UILabel alloc]initWithFrame:CGRectMake(kCellEdgeInset, _showTime.frame.origin.y+_showTime.frame.size.height+kCellInset, kLeftLabelWidth, kLeftLabelHeight*0.5)];
            _Detail.text = @"国语2D 4号厅 剩余座位:23";
            _Detail.font = [UIFont systemFontOfSize:11];
            [_Detail setTextColor:[UIColor grayColor]];
            
            _Price = [[UILabel alloc]initWithFrame:CGRectMake(kCellEdgeInset+kLeftLabelWidth, _Detail.frame.origin.y, screenWidth-kLeftLabelWidth-kCellEdgeInset*2, _Detail.frame.size.height)];
            _Price.text = @"原价¥38";
            _Price.textAlignment = NSTextAlignmentRight;
            _Price.font = [UIFont systemFontOfSize:11];
            [_Price setTextColor:[UIColor grayColor]];
            
            [self addSubview:_showTime];
            [self addSubview:_VIPPrice];
            [self addSubview:_Detail];
            [self addSubview:_Price];
            
        }
        return self;
    }
    
    - (void)setSelected:(BOOL)selected animated:(BOOL)animated
    {
        [super setSelected:selected animated:animated];
        
        // Configure the view for the selected state
    }
    
    @end
    TableViewCell2.m

     

    注意 ViewController2.m中有一句

    self.edgesForExtendedLayout = UIRectEdgeNone;

    默认是UIRectEdgeAll,设置为UIRectEdgeNone之后有什么用呢?

    请看ViewController2.m中有一句

    MKHorizMenu *horizMenu = [[MKHorizMenu alloc] initWithFrame:CGRectMake(0, 0, screenWidth, HORIZONMENU_HEIGHT)];

    就是当我的横向菜单的Origin起点为(0,0)的时候,系统会将其放置在状态栏和导航栏的下面,而不是真正的(0,0)。所以设置UIRectEdgeNone后我可以避免计算状态栏和导航栏的高度。

     

    吐槽一句,虽然成功实现了这个功能,但是这个库可自定义的东西太少,特别是样式,基本都写在库里,这点很不好,一旦有什么需求就需要修改库的源码。有时间自己再写一个……

     

    注:

    其实最简单的是使GMGridview(开源)和UICollectionView。20150608

    转载于:https://www.cnblogs.com/chenyg32/p/4478346.html

    展开全文
  • 高仿网易新闻抽屉效果 横向菜单 页面滑动.zip,太多无法一一验证是否可用,程序如果跑不起来需要自调,部分代码功能进行参考学习。
  • 响应式横向菜单

    2018-12-05 18:21:00
    响应式横向菜单 在线演示 本地下载 posted @ 2018-12-05 18:21 栖息地 阅读(...) 评论(...) 编辑 收藏

    响应式横向菜单

    1546356-20181205182027387-1833734591.png

    在线演示 本地下载

    posted @ 2018-12-05 18:21 栖息地 阅读(...) 评论(...) 编辑 收藏
    展开全文
  • 主要介绍了js实现的二级横向菜单条,是非常美观简洁的二级导航条效果,可实现针对鼠标事件的动态响应及页面样式切换功能,简单实用,需要的朋友可以参考下
  • 制作横向菜单

    2015-05-24 17:26:00
    所谓横向菜单就是有三个标题栏,当鼠标移到那个标题就显示下级菜单,其他隐藏。 <!DOCTYPE ...

    所谓横向菜单就是有三个标题栏,当鼠标移到那个标题就显示下级菜单,其他隐藏。

    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>横向菜单</title>
    <style type="text/css"> 
           td {font-size: 13px; 
               color: #000000;
               line-height: 22px;} 
               
           div{
                /*设置层背景样式*/   
                background-color:#669933;   
                text-align:center;
               
                display:none; 
                
        } 
        
           a {font-size: 16px;
               color: #FFFFFF; 
               text-decoration: none;  
              /*文字链接的背影样式*/   
               background-color:#669933;    
               width:100px;
               line-height:22px;
               text-align:center;
              
    
    }    
            a:hover {font-size: 13px; 
                     color: #ffffff;    
              /*鼠标在文字链接上时的文字背景样式*/    
                  background-color:#FE9D01;      
                  width:200px;
                  line-height:22px;
                  text-align:center;  
    }
    </style> 
    
    <script language="JavaScript">   
    function show(d1){    document.getElementById(d1).style.display='block'; //显示层 
    
    }    
    
    function hide(d1){  
        document.getElementById(d1).style.display='none'; 
    
        }  
        
        </script> 
        
        </head> 
        
        <body> 
        
        <table width="220" style="border:1px solid red;background:#fff" cellspacing="0" cellpadding="0" align="center">  
        <tr>   
          <td><a  onMouseMove="show(1)" onMouseOut="hide(1)">手机数码</a></td> 
          <td><a onMouseMove="show(2)" onMouseOut="hide(2)">淘宝集市</a></td>  
          <td><a  onMouseMove="show(3)" onMouseOut="hide(3)">品牌商城</a></td> 
        </tr> 
        
    <tr>  
          <td>   
            <div id="1" >
                 手机数码1<br/>
                 手机数码2<br/>
                 手机数码3
           </div>             
        </td> 
        
       <td>   
         <div id="2" >
                淘宝集市1<br/>
                淘宝集市2<br/>
                淘宝集市3
          </div>   
       </td> 
    
       <td>   
         <div id="3">
              品牌商城1<br/>
              品牌商城2<br/>
              品牌商城3
         </div>  
       </td>  
    </tr>
     
    </table>
    
    </body>
     
     </html> 

     

    转载于:https://www.cnblogs.com/wlx520/p/4500374.html

    展开全文
  • 使用vue组件+iscroll实现一个横向菜单,可是却不能滑动,给父元素ul写死一个宽度可以滑动。但是,我在computed里计算宽度,直接路由进去不能滑动,当我进入别的组件(切换路由)回来又可以滑动了示例地址:...
  • jQuery多级纵向与横向菜单,缓冲动画效果,这是来自国外网站的一个特效菜单,理论上可以实现无限级,请根据自己的需求修改吧,接下来烈火下载会推出更多精品脚本资源(jQuery)源代码,欢迎关注。  特效代码截图如下...
  • HTML横向菜单

    2016-01-17 14:36:08
    非常简便的html导航菜单,鼠标上移改变样式,适合初学者
  • 响应重多客户的要求与心声,RDIFramework.NET框架Web版本主界面新增横向菜单功能。横向菜单更加直观,用户可操作与展示的空间更多,符合实际应用要求。 一、效果展示 最终界面效果: 横向菜单效果图 动画展示效果:...
  • 横向菜单 页面滑动 例子 UIViewController *VC1 = [[UIViewController alloc]init]; [VC1.view setBackgroundColor:[UIColor redColor]]; UIViewController *VC2 = [[UIViewController alloc]init]; ...
  • CSS制作简单的横向菜单

    千次阅读 2015-12-04 15:42:47
    用CSS制作简单的横向菜单
  • css经典横向菜单,多种样式经典横向菜单,多种颜色、样式
  • 之前在学习的时候有稍微捣鼓一下网易云音乐,主要是为了学习Vue,巩固基础知识,然后看到这个横向菜单,当然个人也喜欢看球,所以每次看腾讯NBA的时候总是会想这个是这样实现的,于是借助之前还没写完的demo,完成这...
  • css 横向菜单实现代码

    2020-09-25 13:18:02
    大多网站用的还是横向的导航,那么就来跟我学下横向导航是如何实现的.
  • 【JQuery】纵向横向菜单

    千次阅读 热门讨论 2016-01-23 11:41:04
    学习JQuery的时候发现每一个demo都特别好,这篇博客记录其中一个demo——纵向横向菜单效果。  第一个菜单实现的是点击菜单项显示相应的子菜单项,三角变为向下的三角。下面的菜单鼠标移动到菜单项显示对应的子...
  • 横向菜单滚动翻页功能的实现 实现方法 使用了走马灯的思想,将菜单项放在一排,超过显示区域隐藏,点击实现菜单的滚动。 效果图 具体实现 html部分 <div class="dataNav"> <button class=...
  • //首页横向菜单+ViewPager import android.support.design.widget.TabLayout; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentManager; import android.support.v4.app....

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,650
精华内容 660
关键字:

横向菜单