UIKit框架式单页网页网页

分享于 

11分钟阅读

Web开发

  繁體 雙語

介绍

本文将向你展示如何使用 UIKit (http://getuikit.com/) 框架制作一个带有侧边面板的高级粘性导航栏。 我希望在这个伟大的框架中引入更多的人。 单击图像以查看操作中的代码。



背景

为什么是 UIKit我开始一个新的项目,具体设计。 因为我的网站会有很多信息,所以我不想用超复杂的导航菜单来占用用户。 我想让它尽可以能直观,直到需要隐藏选项,直到需要和减少网站的部分。 为此,我希望使用带有滚动间谍。平滑滚动和第二个画布导航的粘性导航栏,通过使用Heaven的三分号来展示。 对于那些不知道粘贴导航栏或者滚动间谍看起来像( 或者不知道它们被称为什么- 这可能是一个痛苦,因为没有标准命名约定)的人,你可以在这里找到一个好例子: 当你向下滚动页面时,导航栏会随你移动,知道当你到达一个新的部分,你会看到相应的菜单条目。 自从我用 Bootstrap 完成了最后几个项目之后,这是一个完美的模板。 Bootstrap 3有这些特性是非常棒的。 我唯一要做的就是把canvas的菜单。 很容易啊不幸的是 Bootstrap 不包括sidepanel小部件,但是有很多插件可以添加这个功能:?

  • SidebarJS: http://makotot.github.io/sidebar/
  • Slidebars: http://plugins.adchsm.me/slidebars/usage.php - 它甚至在示例中有粘性的导航栏 ! 减少滚动间谍和平滑滚动功能。
  • Sidr: http://www.berriart.com/sidr/
即使 Plug-Ins 没有工作,我总是可以从头开始编写它,就像我在上一个项目中所做的。 然而,当我把这三个项目一起放在一起时,似乎没有什么是。 我尝试了多个不同插件来添加关闭画布菜单,但是每个插件都有 z-index 问题或者无法完全加载。 如果我把画布导航导航到工作,滚动将关闭或者不能顺利运行。 试图调试这些问题使我觉得 Bootstrap 可以能有点复杂,不再适合使用 Plug-Ins。 是时候看看还有什么其他的了
  • jQuery UI: 几年前我为 Bootstrap 放弃了这个,因为它似乎没有太快的发展。 我想既然大家都使用 JQuery,那么它会有很多积极的开发。 我希望他们现在能完成 2.0版。 没有,在他们的博客上也没有提到过。
  • 基金会:现在是版本 5 ! 不错。它有一个粘性的导航,画布和工具提示。 这不是最好的用户界面,但也不是坏的。
  • UIKit (http://getuikit.com/): 最初我认为这是一个新版本的http://visionmedia.github.io/uikit/,,但它似乎没有关联,尽管有了 NAME。 看起来不错,似乎有我想要的一切,还有更多。 他们的面板没有使用div标签,而是使用了 HTML 5文章标签- 一种更好的组织方法。 文章还包括标题。基数。线索和内容的不同样式。 样式是现代的阴影和渐变。 据github说,它仍处于积极发展之中。 就是这样 !

使用代码

首先我们要做的是从UIKit下载中包含我们的文件。 ,站点上显示的样式实际上不是默认样式,它实际上是渐变样式。 花了我一分钟才知道为什么事情看起来不一样。 :) 你还会注意到,他们使用ProximaNovaLight作为一个字体,该字体不包含在下载中。 如果你目前没有字体,你可以从谷歌图书馆的字体中轻松找到一些东西。 我将使用这里示例的默认浏览器字体。 sticky文件位于插件文件夹中,文档在它的站点的addons addons中找到。

<linkrel="stylesheet"href="css/uikit.gradient.min.css"/><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js"type="text/javascript"></script><scriptsrc="js/uikit.min.js"></script><scriptsrc="js/sticky.min.js"></script>
我们将从导航栏开始。 我们可以使用 HTML 5'nav'标记来分割这个组件。 UIKit使用样式类定义与 Bootstrap 相似的所有组件。
  • uk-navbar 让我们定义导航栏
  • uk-navbar-attached 将导航栏设置为非常好,当附着到顶部但不将它的附着到站点顶部时

接下来我们有一些数据属性- 数据是另一个用于定义属性的HTML 5技巧,这些属性可以被JavaScript使用。 这也类似于 Bootstrap。

  • 为了使导航栏实际上粘贴到屏幕的顶部,我们包括了in文件并引用了导航标记中的data-uk-sticky 属性。
  • 在滚动或者导航到站点的每个部分时,要突出显示导航栏,我们需要包含scrollspy导航并设置它以突出显示导航列表中最近的项目。 我不确定为什么sticky被认为是一个插件,而scrollspy是基本包的一部分。
  • 为了使菜单从菜单项顺利滚动到菜单项,我将 data-uk-smooth-scroll 属性添加到锚点元素
  • 属性确保当我们第一次访问页面时显示 menu1 menu1
  • & #9776 ;实体是我们的汉堡符号。
<navclass="uk-navbar uk-navbar-attached"data-uk-stickydata-uk-scrollspy-nav="{closest:'li'}"><ulclass="uk-navbar-nav"><li><ahref="#sidepanel">&#9776;</a></li><liclass="uk-active"><ahref="#Menu1"data-uk-smooth-scroll>Menu1</a></li><li><ahref="#Menu2"data-uk-smooth-scroll>Menu2</a></li><li><ahref="#Menu3"data-uk-smooth-scroll>Menu3</a></li></ul>
现在我们已经有了导航栏,让我们来做一些内容。 我将使用文章标签来定义三个不同的部分- 每个菜单项对应一个。 在纯web样式中,它填充了通常从他们的站点获取的,术语。 对于每个我们都要放置一个锚标记,并设置它的to等于每个菜单。 我已经添加了一段灰色或者部分白色类,以便我们可以添加一些自己的样式。
<aid='Menu1'></a><articleclass="uk-article section-white"><h1class="uk-article-title">Article title1</h1><pclass="uk-article-meta">Written by Super User on 12 April 2012. Posted in Blog</p><pclass="uk-article-lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p><br/> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</article><aid='Menu2'></a><articleclass="uk-article section-gray"><h1class="uk-article-title">Article title2</h1><pclass="uk-article-meta">Written by Super User on 12 April 2012. Posted in Blog</p><pclass="uk-article-lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex </article><aid='Menu3'></a><articleclass="uk-article section-white"><h1class="uk-article-title">Article title3</h1><pclass="uk-article-meta">Written by Super User on 12 April 2012. Posted in Blog</p><pclass="uk-article-lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqea commodo consequat.</article>

为了让我们的文章占用更多的空间,我们将把它们扩展到屏幕的高度。 我也让其他的颜色不同,以便我们能更好地看到过渡。 顶部的padding 使我们的粘性 header 不会出现在文章标题中。 下面是我们要做的CSS Fragment。

.section-gray{
 height:100%;
 width:100%;
 background: #eee;
 padding-top:50px;
 min-height:800px;
}
.section-white{
 height:100%;
 width:100%;
 background: #fff;
 padding-top:50px;
 min-height:800px;
} 

我们需要做的最后一件事是创建侧边面板内容。 我们通过将我们的汉堡上的锚标记与我们的sidepanel的of匹配,它们有一类 uk-offcanvas。 这将用于覆盖页面内容,以便只将焦点设置到侧边面板。 uk-offcanvas-bar 是面板本身,UIkit甚至还有一个特殊类来设置侧边面板链接的样式:

<divid="sidepanel"class="uk-offcanvas"><divclass="uk-offcanvas-bar"><ulclass='uk-nav uk-nav-offcanvas'data-uk-nav=''><li><ahref=''>Link1</a><li><li><ahref=''>Link2</a><li><li><ahref=''>Link3</a><li></ul></div></div>

就是这样没有额外的Plug-Ins,非常小的custum编码,而且站点看起来很不错。

如果你喜欢的话,你可能会喜欢我的其他文章: http://www.codeproject.com/Articles/693841/Making-Dashboards-with-Dc-js-Part-Using-Crossfil



WEB    framework  网站  SID  SIN  
相关文章