Javascript 无滚动条的CSS可拖动导航
编辑：我在下面包括了一个js fiddle链接 我正在尝试为一个网站创建一个导航栏，如果你用一个小屏幕访问它，导航栏不是可折叠的，但它是绝对的，你只需要抓住并左右滑动它，而不滑动整个页面，但是Javascript 无滚动条的CSS可拖动导航,javascript,html,css,Javascript,Html,Css,编辑：我在下面包括了一个js fiddle链接 我正在尝试为一个网站创建一个导航栏，如果你用一个小屏幕访问它，导航栏不是可折叠的，但它是绝对的，你只需要抓住并左右滑动它，而不滑动整个页面，但是div仅用于导航栏。它正在创建一个水平滚动条，它不应该像我想要的那样 $（文档）.ready（函数（）{ }); $（函数（）{ var curDown=false， curYPos=0， curXPos=0； $（窗口）.mousemove（函数（m）{ 如果（curDown==真）{ $（窗口）.sc
div$（文档）.ready（函数（）{
});
$（函数（）{
var curDown=false，
curYPos=0，
curXPos=0；
$（窗口）.mousemove（函数（m）{
如果（curDown==真）{
$（窗口）.scrollTop（$（窗口）.scrollTop（）+（curYPos-m.pageY））；
$（窗口）.scrollLeft（$（窗口）.scrollLeft（）+（curXPos-m.pageX））；
}
});
$（窗口）.mousedown（函数（m）{
curDown=true；
curYPos=m.pageY；
curXPos=m.pageX；
});
$（窗口）.mouseup（函数（）{
curDown=false；
});
})正文{
保证金：0；
/*溢出x：隐藏*/
}
标题{
背景色：#F8；
}
#剥落{
高度：60px；
填充顶部：17px；
宽度：100%；
}
#公司名称{
字体系列：Roboto；
字号：700；
左侧填充：12px；
}
.导航{
右边距：100px；
填充顶部：20px；
背景色：白色；
宽度：100%；
光标：-webkit抓取；
-moz用户选择：-moz无；
-khtml用户选择：无；
-webkit用户选择：无；
大纲：无；
-webkit字体平滑：抗锯齿；
用户选择：无；
位置：绝对位置；
}
美国海军{
显示：表格；
表布局：固定；
}
.nav ul>li{
显示：表格单元格；
字体系列：SegoeUI；
字号：700；
文字装饰：下划线；
颜色：#9999F；
}
.导航ul>li>a{
显示：块；
右边距：15px；
字体系列：SegoeUI；
字体大小：14px；
字号：500；
文字装饰：下划线；
颜色：#9999F；
}
.nav ul>.active{
显示：块；
字体系列：SegoeUI；
字体大小：14px；
字号：500；
文字装饰：下划线；
文字装饰颜色：#9999F；
颜色：#00A97E；
}
.nav ul>.active>a{
显示：块；
字体系列：SegoeUI；
字号：500；
文字装饰：下划线；
文字装饰颜色：#9999F；
颜色：#00A97E；
}
.填充下划线{
显示：内联块；
边框底部：1px纯黑；
垫底：2件；
}
#用户导航{
字体系列：SegoeUI；
字体大小：正常；
字体大小：12px；
边缘顶部：2倍；
右边距：150px；
浮动：对；
}
#用户导航>ul{
列表样式类型：无；
}
#用户导航>ul>li{
显示：内联块；
右边距：20px；
}
媒体发展亚太区
- 管理x44 |配置文件
- 示例链接
- 注销
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script src="js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/styles.js">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<style>
body {
margin: 0;
/*overflow-x: hidden;*/
}
header {
background-color: #F8F8F8;
}
#strip {
height: 60px;
padding-top: 17px;
width: 100%;
}
#company_name {
font-family: Roboto;
font-weight: 700;
padding-left: 12px;
}
.nav {
margin-right: 100px;
padding-top: 20px;
background-color: white;
width: 100%;
cursor: -webkit-grab;
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
outline: none;
-webkit-font-smoothing: antialiased;
user-select: none;
position: absolute;
overflow: scroll;
overflow-x: hidden;
overflow-y: hidden;
}
.nav ul {
display: table;
table-layout: fixed;
}
.nav ul > li {
display: table-cell;
font-family: Segoe UI;
font-weight: 700;
text-decoration: underline;
color: #99999F;
}
.nav ul > li > a {
display: block;
margin-right: 15px;
font-family: Segoe UI;
font-size: 14px;
font-weight: 500;
text-decoration: underline;
color: #99999F;
}
.nav ul > .active {
display: block;
font-family: Segoe UI;
font-size: 14px;
font-weight: 500;
text-decoration: underline;
text-decoration-color: #99999F;
color: #00A97E;
}
.nav ul > .active > a {
display: block;
font-family: Segoe UI;
font-weight: 500;
text-decoration: underline;
text-decoration-color: #99999F;
color: #00A97E;
}
.padded-underline {
display: inline-block;
border-bottom: 1px solid black;
padding-bottom: 2px;
}
#user_nav {
font-family: Segoe UI;
font-weight: normal;
font-size: 12px;
margin-top: 2px;
margin-right: 150px;
float: right;
}
#user_nav > ul {
list-style-type: none;
}
#user_nav > ul > li {
display: inline-block;
margin-right: 20px;
}
</style>
<body>
<header>
<div id="strip">
<img src="images/user-icon.png" style="width: 30px; margin-left: 20px"><span id="company_name">MDA Media Development APAC</span>
<div id="user_nav">
<ul>
<li>Admin x44 | Profile</li>
<li>Sample Link</li>
<li>Logout</li>
</ul>
</div>
</div>
<div class="nav">
<button class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div id="myNavbar">
<ul>
<li class="active"><a href="#">DASHBOARD</a></li>
<li><a href="#">ACCOUNTS</a></li>
<li><a href="#">ACCOUNTS</a></li>
<li><a href="#">ACCOUNTS</a></li>
<li><a href="#">ACCOUNTS</a></li>
<li><a href="#">ACCOUNTS</a></li>
<hr style="margin-top: -4px; margin-right: 50px" />
</ul>
</div>
</div>
</header>
<!-- <input type="text"> -->
</body>
</html>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script>
$(document).ready(function() {
});
$(function(){
var curDown = false,
curYPos = 0,
curXPos = 0;
$(".nav").mousemove(function(m){
if(curDown === true){
$(".nav").scrollTop($(".nav").scrollTop() + (curYPos - m.pageY));
$(".nav").scrollLeft($(".nav").scrollLeft() + (curXPos - m.pageX));
}
});
$(".nav").mousedown(function(m){
curDown = true;
curYPos = m.pageY;
curXPos = m.pageX;
});
$(".nav").mouseup(function(){
curDown = false;
});
})
</script>
身体{
保证金：0；
/*溢出x：隐藏*/
}
标题{
背景色：#F8；
}
#剥落{
高度：60px；
填充顶部：17px；
宽度：100%；
}
#公司名称{
字体系列：Roboto；
字号：700；
左侧填充：12px；
}
.导航{
右边距：100px；
填充顶部：20px；
背景色：白色；
宽度：100%；
光标：-webkit抓取；
-moz用户选择：-moz无；
-khtml用户选择：无；
-webkit用户选择：无；
大纲：无；
-webkit字体平滑：抗锯齿；
用户选择：无；
位置：绝对位置；
溢出：滚动；
溢出x：隐藏；
溢出y：隐藏；
}
美国海军{
显示：表格；
表布局：固定；
}
.nav ul>li{
显示：表格单元格；
字体系列：SegoeUI；
字号：700；
文字装饰：下划线；
颜色：#9999F；
}
.导航ul>li>a{
显示：块；
右边距：15px；
字体系列：SegoeUI；
字体大小：14px；
字号：500；
文字装饰：下划线；
颜色：#9999F；
}
.nav ul>.active{
显示：块；
字体系列：SegoeUI；
字体大小：14px；
字号：500；
文字装饰：下划线；
文字装饰颜色：#9999F；
颜色：#00A97E；
}
.nav ul>.active>a{
显示：块；
字体系列：SegoeUI；
字号：500；
文字装饰：下划线；
文字装饰颜色：#9999F；
颜色：#00A97E；
}
.填充下划线{
显示：内联块；
边框底部：1px纯黑；
垫底：2件；
}
#用户导航{
字体系列：SegoeUI；
字体大小：正常；
字体大小：12px；
边缘顶部：2倍；
右边距：150px；
浮动：对；
}
#用户导航>ul{
列表样式类型：无；
}
#用户导航>ul>li{
显示：内联块；
右边距：20px；
}
媒体发展亚太区
- 管理x44 |配置文件
- 示例链接
- 注销