tabmenu 纵向实现

最新推荐文章于 2024-06-01 17:32:39 发布
最新推荐文章于 2024-06-01 17:32:39 发布 · 161 阅读 · 0
文章标签：

#HTML #CSS #Firebug #IE

本文介绍了一个简单的纵向菜单布局实现方案，包括对应的 CSS 和 HTML 代码。该布局包含多个菜单项和子菜单，通过 CSS 控制样式及位置，适用于网页导航栏的设计。

参照以上样式做了个简易的纵向菜单

css 代码
 
  1. * {margin:0; padding:0;}
  2. body {font-size:12px; font-family:宋体; color:#666;}
  3. ul {list-style:none;}
  5. img {border:none;}
  7. /* Apply */
  8. .hackbox {clear:both;}
  11. .colaB {width:816px;background:#c3dbf9;}
  12. .colaBa {width:260px; float:left; background:#e1e9f8;}
  13. .colaBb {width:540px; float:rightright; background:#FFFFFF; border-right:16px solid #e1e9f8;}
  15. /* mainfull */
  16. #mainfull{width:816px; margin:0 auto;}
  18. #outsidebar {height: 30px;background: url("../images/logo.gif");border-bottom: 1px #FFF solid;}
  19. /* header */
  20. #header {height: 70px;background: url("../images/bar.gif");}
  21. /* body */
  22. #mainpage {width:816px; }
  28. .nav {width:260; background:url(../images/menu_bg.gif) repeat-x top left;}
  29. .nav h3 a{padding:7px 50px 5px 24px; font-size:14px; color:#FFF; display:block;}
  30. .nav h3 a:hover{ text-decoration:none;}
  31. .systemNav{ margin-top:10px;}
  32. .systemNav ul {padding:10px 20px;}
  33. .systemNav ul li{height:25px;padding-top:10px;}
  34. .systemNav ul li a{padding:7px 50px 5px 50px; height:25px; background:url(../images/new.gif) no-repeat center left;}
  35. .systemNav ul li a:hover{border:1px solid #3c6eef; text-decoration:none;}
  40. #content{ height:400px;}
  42. /* footer */
  43. #footer {
  44. height: 25px;
  45. background: #C3DBF9;
  46. border-top: 1px #F2F7FD solid;
  47. }

html代码1
 
  2. <body>
  3. <div id="mainfull">
  4. <div id="outsidebar">div>
  6. <div id="header">div>
  8. <div id="mainpage">
  9. <div class="colaB">
  10. <div class="colaBa">
  12. <div class="nav">
  13. <h3 ><a href="chara01.html" title="男主角" class="text666">考勤管理a>h3>
  15. div>
  17. <div class="systemNav">
  18. <ul>
  19. <li >
  20. <a href="#"><strong>当天考勤strong>a>
  21. li>
  22. <li >
  23. <a href="#"><strong>请假审批strong>a>
  24. li>
  25. <li >
  26. <a href="#"><strong>考勤统计strong>a>
  27. li>
  28. ul>
  29. div>
  31. <div class="nav">
  32. <h3 ><a href="chara01.html" title="男主角" class="text666">教学管理a>h3>
  33. div>
  37. <div class="nav">
  38. <h3 ><a href="chara02.html" title="女主角" class="text666">家校互通a>h3>
  39. div>
  42. <div class="nav">
  43. <h3 ><a href="chara03.html" title="反派角色" class="text666">系统管理a>h3>
  44. div>
  45. div>
  46. <div class="colaBb">
  47. <div id="content">div>
  48. div>
  49. <div class="hackbox">div>
  50. div>
  51. div>
  54. <div id="footer">div>
  56. div>
  57. body>
  58. html>

效果如下：

当布局位置不同时 存在不小的区别：

第一 主菜单的第一项的宽度难于控制；

第二 主菜单文字内容消失；

html代码2
 
  2. <body>
  3. <div id="mainfull">
  4. <div id="outsidebar">div>
  6. <div id="header">div>
  8. <div id="mainpage">
  9. <div class="colaB">
  10. <div class="colaBa">
  12. <div class="nav">
  13. <h3 ><a href="chara01.html" title="男主角" class="text666">考勤管理a>h3>
  15. <div class="systemNav">
  16. <ul>
  17. <li >
  18. <a href="#"><strong>当天考勤strong>a>
  19. li>
  20. <li >
  21. <a href="#"><strong>请假审批strong>a>
  22. li>
  23. <li >
  24. <a href="#"><strong>考勤统计strong>a>
  25. li>
  26. ul>
  27. div>
  28. div>
  31. <div class="nav">
  32. <h3 ><a href="chara01.html" title="男主角" class="text666">教学管理a>h3>
  33. div>
  37. <div class="nav">
  38. <h3 ><a href="chara02.html" title="女主角" class="text666">家校互通a>h3>
  39. div>
  42. <div class="nav">
  43. <h3 ><a href="chara03.html" title="反派角色" class="text666">系统管理a>h3>
  44. div>
  45. div>
  46. <div class="colaBb">
  47. <div id="content">div>
  48. div>
  49. <div class="hackbox">div>
  50. div>
  51. div>
  54. <div id="footer">div>
  56. div>
  57. body>
  58. html>

使用小程序实现侧屏抽屉、页中页效果
商务合作 / 项目定制 / 学习交流。个人vx：lovely_wml
09-26 4991
抽屉菜单是现在移动端网页、App都很常见的设计，这里将用小程序来实现这一效果。小程序提供了一系列触摸触发的事件，我们可以在这些事件上绑定自定义的响应，即可达到打开关闭菜单的操作效果。
android竖向的导航菜单,Android底部导航栏实现（一）之BottomNavigationBar
weixin_29516131的博客
05-26 946
BottomNavigationBar这个控件的使用之前已经写过，这里不再赘述，详情请参考BottomNavigationBar的使用。下面直接上代码：初始化及相关设置：mBottomNavigationBar = (BottomNavigationBar) view.findViewById(R.id.bottom_navigation_bar);mBottomNavigationBar.set...
纵向菜单样式
04-19
纵向菜单样式
html中纵向tab切换效果,Tab标签页的切换效果
weixin_33416697的博客
05-31 745
Tab标签页的切换效果，这里有一个内容要特别注意的那就是给标签的mouseover事件设置延迟，这样防止用户恶意的移动鼠标导致放送大量的请求而是服务器崩溃，用到setTimeout函数，主要用到已下的事件1 $().each(function(){}) 这个是个非常重要的遍历所有标签的好办法2 mouseover事件，还有就是关键的css样式编写，控制显示的样式，html>tab标签1标签...
Winform DevExpress控件库（三） 使用NavBarControl控件定制导航栏
热门推荐
神码编程
01-10 5万+
NavBarControl控件：主要作用是制作包含多个选项组并且每个组里包含多个子选项的导航栏；位于 工具箱 -> Navigation & Layout（导航栏与布局类控件） 目录下；在工具箱输入名称NavBarControl检索，然后直接拖拽到面板上便可使用，最好是放在一个子容器里（比如PanelControl）；NavBarControl控件常用属性描述：（选中NavBarControl控件
html 纵向选项卡,简单竖向Tab选项卡
weixin_33817338的博客
05-31 1198
*{ padding:0;margin: 0;}.example{ width: 500px;height: 400px; margin: 50px auto 0 auto; }#mytab{ width: 100px; float: left; border-left: 1px solid lightgray; border-bottom:1px solid lightgray;}#mytab ...
微信小程序实现滑动tab标签页
Archimelan的博客
10-28 4501
外层的view添加2个事件，一个是触摸开始，一个触摸结束，在事件里可以根据target的坐标判断是否发生左右滑动，以此改变页面及标签的转变。发生改变时，标签动态改变active样式，内容则用translate实现左右平移。 view class="page" catch:touchstart="pageTouchStartHandler" catch:touchend="pageTouchEndH
纵向导航栏使用navbar-nav-scroll溢出截断问题
最新发布
凉拌糖醋鱼
06-01 1110
在使用Bootstrap的格栅系统进行纵向布局时，纵向导航栏使用了flex-column和navbar-nav-scroll类，导致当纵向导航栏的项目达到一定数量时，内容出溢出截断，使得页面底部会空出来一截，所以在类似的布局中应避免使用Flex布局，使用按钮组或列表组的形式做出纵向导航栏的效果，使用JS来实现动态点击效果。
HTML之--------导航在右边的纵向选项卡
shlichanglong的专栏
08-13 1345
一。导航在右侧，导航用，导航内容用 二. 导航在左侧，导航用，导航内容用
Html中tab的实现(3种类型)
zzc1684的博客
09-30 1566
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;
简单竖向Tab选项卡
weixin_33725126的博客
05-07 1809
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ padding:0;margin: 0;} .exampl...
TAB效果，五个，竖排横排，左右打开等等你想要的都有
网站开发初中级代码参考-转载
12-05 398
  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt..
纵向tab标签切换效果
weixin_30858241的博客
07-21 586
html css js直接用就好 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>纵向tab标签切换效果</title> <style> *{ margin:0...
Java Swing中的下拉式菜单(menu)、弹出式菜单(JPopupMenu)、选项卡窗体(JTabbedPane),TextArea右键菜单 组件使用案例
lingle1的博客
03-22 3431
文章目录一:下拉式菜单的创建步骤:二:弹出式菜单的创建步骤:三:选项卡窗体: 菜单是GUI中最常用的组件,菜单不是Component类的子类,不能放置在普通容器中,不受布局管理器的约束,只能放置在菜单栏中. 菜单组件由菜单栏 (MenuBar)、菜单（Menu）和菜单项(MenuItem)三部分组成。 一个菜单栏由若干个菜单组成，一个菜单又由若干个菜单项组成。一般菜单栏放 Frame 窗口中，只要...
java怎么实现垂直导航栏_jquery实现垂直和水平菜单导航栏
weixin_39900468的博客
03-02 301
本文实例为大家分享了jquery菜单导航栏的实现代码，供大家参考，具体内容如下1.HTML代码竖直导航菜单$(function(){//垂直导航栏，点击下拉子菜单$(".main>a").click(function(){$(this).next().slideToggle(500).parent().siblings().find(".child").slideUp(500);})//水平...
jQuery UI 1.8.16自定义版本特性解析
- **Menu**：一个非常灵活的导航菜单组件，可以用于创建横向或纵向的菜单。它支持多种菜单样式，并且能够响应用户的点击事件，适用于创建多级菜单系统。 - **Tab**：提供了标签页的布局功能，允许用户在不同的内容...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值