semantic多主题切换菜单效果代码
代码语言:html
所属分类:菜单导航
代码描述:semantic多主题切换菜单效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> <title>Theming - Semantic</title> <!--- Site CSS --> <link rel="stylesheet" type="text/css" href="//repo.bfw.wiki/bfwrepo/css/semantic/components/reset.css"> <link rel="stylesheet" type="text/css" href="//repo.bfw.wiki/bfwrepo/css/semantic/components/site.css"> <link rel="stylesheet" type="text/css" href="//repo.bfw.wiki/bfwrepo/css/semantic/components/grid.css"> <!--- Component CSS --> <link rel="stylesheet" type="text/css" href="//repo.bfw.wiki/bfwrepo/css/semantic/components/menu.css"> <link rel="stylesheet" type="text/css" href="//repo.bfw.wiki/bfwrepo/css/semantic/components/input.css"> <link rel="stylesheet" type="text/css" href="//repo.bfw.wiki/bfwrepo/css/semantic/components/dropdown.css"> <link rel="stylesheet" type="text/css" href="//repo.bfw.wiki/bfwrepo/css/semantic/components/icon.css"> <link rel="stylesheet" type="text/css" href="//repo.bfw.wiki/bfwrepo/css/semantic/components/button.css"> <link rel="stylesheet" type="text/css" href="//repo.bfw.wiki/bfwrepo/css/semantic/components/transition.css"> <!--- Example Libs --> <link rel="stylesheet" type="text/css" href="//repo.bfw.wiki/bfwrepo/css/semantic/components/popup.css"> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/css/semantic/components/popup.js"></script> <!--- Component JS --> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/css/semantic/components/transition.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/css/semantic/components/dropdown.js"></script> <!--- Example CSS --> <style> body { padding: 1em; } .ui.menu { margin: 3em 0em; } .ui.menu:last-child { margin-bottom: 110px; } </style> <!--- Example Javascript --> <script> $(document) .ready(function() { $('.ui.menu .ui.dropdown').dropdown({ on: 'hover' }); $('.ui.menu a.item') .on('click', function() { $(this) .addClass('active') .siblings() .removeClass('active') ; }) ; }) ; </script> </head> <body> <div class="ui menu"> <div class="header item">Brand</div> <a class="active item">Link</a> <a class="item">Link</a> <div class="ui dropdown item"> Dropdown <i class="dropdown icon"></i> <div class="menu"> <div class="item">Action</div> <div class="item">Another Action</div> <div class="item">Something else here</div> <div class="divider"></div> <div class="item">Separated Link</div> <div class="divider"></div> <div class="item">One more separated link</div> </div> </div> <div class="right menu"> <div class="item"> <div class="ui action left icon input"> <i class="search icon"></i> <input type="text" placeholder="Search"> <button class="ui button">Submit</button> </div> </div> <a class="item">Link</a> </div> </div> <div class="ui inverted menu"> <div class="header item">Brand</div> <div class="active item".........完整代码请登录后点击上方下载按钮下载查看
网友评论0