collinforever
小狐狸
小狐狸
  • UID13751
  • 注册日期2006-07-13
  • 最后登录2010-11-10
  • 发帖数5
  • 经验10枚
  • 威望0点
  • 贡献值0点
  • 好评度0点
阅读:18465回复:55

all in one side-bar的侧栏问题,能否浮在网页上

楼主#
更多 发布于:2010-11-10 11:09
能不能设置侧栏打开时是浮在网页上,而不是把网页向右推?每次打开侧栏网页都被向右挤,侧栏关闭又恢复,感觉特别扭。。。。。
当你遇见完美的人选
alanfly
千年狐狸
千年狐狸
  • UID31035
  • 注册日期2009-11-10
  • 最后登录2024-05-19
  • 发帖数2769
  • 经验580枚
  • 威望1点
  • 贡献值128点
  • 好评度102点
  • 社区居民
  • 最爱沙发
  • 忠实会员
1楼#
发布于:2010-11-10 11:09
这个是悬浮的,不过好像只能4.0用。
Snow Leopard Bookmark/history sidebar | userstyles.org
caoyue
火狐狸
火狐狸
  • UID33966
  • 注册日期2010-09-12
  • 最后登录2016-04-02
  • 发帖数144
  • 经验10枚
  • 威望0点
  • 贡献值0点
  • 好评度0点
  • 社区居民
2楼#
发布于:2010-11-10 11:09
楼上的这个脚本不错
fireman
火狐狸
火狐狸
  • UID33071
  • 注册日期2010-06-15
  • 最后登录2013-04-27
  • 发帖数139
  • 经验10枚
  • 威望0点
  • 贡献值0点
  • 好评度0点
3楼#
发布于:2010-11-10 11:09
alanfly:这个是悬浮的,不过好像只能4.0用。
Snow Leopard Bookmark/history sidebar | userstyles.org
回到原帖
你这个真不错,可以实现跟国产外壳浏览器傲游2,搜狗,360等浏览器一样的浮动且自动隐藏的侧边栏。
alanfly
千年狐狸
千年狐狸
  • UID31035
  • 注册日期2009-11-10
  • 最后登录2024-05-19
  • 发帖数2769
  • 经验580枚
  • 威望1点
  • 贡献值128点
  • 好评度102点
  • 社区居民
  • 最爱沙发
  • 忠实会员
4楼#
发布于:2010-11-10 11:09
修改了下这个脚本,侧边栏改成默认样式;
85px需要具体调整。
@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
#sidebar-box{-moz-appearance: none !important;
border:2px inset -moz-use-text-color !important; }

#sidebar-splitter{display:none !Important;}

#sidebar-box{position:fixed !important; top:85px; bottom:0px;}
#sidebar-header{width:100%; -moz-appearance:none !important;}

#sidebar{height:100%; width:100%!important;}
fireman
火狐狸
火狐狸
  • UID33071
  • 注册日期2010-06-15
  • 最后登录2013-04-27
  • 发帖数139
  • 经验10枚
  • 威望0点
  • 贡献值0点
  • 好评度0点
5楼#
发布于:2010-11-10 11:09
alanfly:修改了下这个脚本,侧边栏改成默认样式;
85px需要具体调整。
@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
#sidebar-box{-moz-appearance: none !important;
border:2px inset -moz-use-text-color !important; }

#sidebar-splitter{display:none !Important;}

#sidebar-box{position:fixed !important; top:85px; bottom:0px;}
#sidebar-header{width:100%; -moz-appearance:none !important;}

#sidebar{height:100%; width:100%!important;}
回到原帖
你这个非常棒,更简洁,在我这里如果有火狐橙就设为83px,没火狐橙就设为60px。不过浮动侧边栏一定要配合自动隐藏,要不然就没有意义了,以下是我拼凑的自动隐藏代码,不过不知为什么侧边栏滚动条失效了。
#bookmarksPanel > hbox { display:none; }

sidebarheader { display: none !important; }


#sidebar-box {min-width:0;  max-width:1px!important;  overflow-x: hidden !important;}

#sidebar-box:hover {max-width:none!important;}
alanfly
千年狐狸
千年狐狸
  • UID31035
  • 注册日期2009-11-10
  • 最后登录2024-05-19
  • 发帖数2769
  • 经验580枚
  • 威望1点
  • 贡献值128点
  • 好评度102点
  • 社区居民
  • 最爱沙发
  • 忠实会员
6楼#
发布于:2010-11-10 11:09
你这个非常棒,更简洁,在我这里如果有火狐橙就设为83px,没火狐橙就设为60px。不过浮动侧边栏一定要配合自动隐藏,要不然就没有意义了,以下是我拼凑的自动隐藏代码,不过不知为什么侧边栏滚动条失效了。
#bookmarksPanel > hbox { display:none; }

sidebarheader { display: none !important; }


#sidebar-box {min-width:0;  max-width:1px!important;  overflow-x: hidden !important;}

#sidebar-box:hover {max-width:none!important;}

帮你改了个自动隐藏的。

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
#sidebar-splitter{display:none !Important;}
#sidebar-box{position:fixed !important; top:85px; bottom:0px; left: -300px !important; -moz-appearance: none !important;  -moz-transition: left .2s .4s ease-in; padding-right:55px !Important;}
#sidebar-box:hover { left:0px !important; -moz-transition: left .2s .1s ease-out;}
#sidebar-header{width:100%; -moz-appearance:none !important;}
#sidebar{height:100%; width:100%!important; border-right:2px inset -moz-use-text-color !important;}
fireman
火狐狸
火狐狸
  • UID33071
  • 注册日期2010-06-15
  • 最后登录2013-04-27
  • 发帖数139
  • 经验10枚
  • 威望0点
  • 贡献值0点
  • 好评度0点
7楼#
发布于:2010-11-10 11:09
alanfly
帮你改了个自动隐藏的。

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
#sidebar-splitter{display:none !Important;}
#sidebar-box{position:fixed !important; top:85px; bottom:0px; left: -300px !important; -moz-appearance: none !important;  -moz-transition: bottom .2s .4s ease-in; padding-right:55px !Important;}
#sidebar-box:hover { left:0px !important; -moz-transition: left .2s .1s ease-out;}
#sidebar-header{width:100%; -moz-appearance:none !important;}
#sidebar{height:100%; width:100%!important; border-right:2px inset -moz-use-text-color !important;}
回到原帖
哇,这个超赞的,还有延迟时间,谢谢啦。
fireman
火狐狸
火狐狸
  • UID33071
  • 注册日期2010-06-15
  • 最后登录2013-04-27
  • 发帖数139
  • 经验10枚
  • 威望0点
  • 贡献值0点
  • 好评度0点
8楼#
发布于:2010-11-10 11:09
-
侧边栏宽度仅有169px,感觉还不错,侧边栏高度不合适修改"85px",想加大侧边栏宽度,可以同时修改“169px”和“168px”,保持两者相差1px即可,比如修改成“200px”和“199px”:

/* 自动隐藏的浮动侧边栏 */

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
#sidebar-splitter{display:none !Important;}
#sidebar-box{position:fixed !important; width:169px !important; top:85px; bottom:0px; left: -168px !important; -moz-appearance: none !important; -moz-transition: left .001s .5s ease-in; padding-right:1px !Important;}
#sidebar-box:hover { left:0px !important; -moz-transition: left .001s .3s ease-out;}
#sidebar-header{display: none !important;}
#sidebar{height:100%; width:100%!important;border-right:1px inset -moz-use-text-color !important;}


 <!-- s8) --><img src="{SMILIES_PATH}/icon_cool.gif" alt="8)" title="Cool" /><!-- s8) --> 无延迟的自动隐藏的浮动侧边栏也整理如下:

/* 无延迟的自动隐藏的浮动侧边栏 */

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
#sidebar-splitter{display:none !Important;}
#sidebar-box{position:fixed !important; width:169px !important; top:85px; bottom:0px; left: -168px !important; -moz-appearance: none !important; padding-right:1px !Important;}
#sidebar-box:hover { left:0px !important;}
#sidebar-header{display: none !important;}
#sidebar{height:100%; width:100%!important;border-right:1px inset -moz-use-text-color !important;}
firefox_userA
非常火狐
非常火狐
  • UID8049
  • 注册日期2005-08-17
  • 最后登录2022-11-05
  • 发帖数609
  • 经验46枚
  • 威望0点
  • 贡献值8点
  • 好评度2点
9楼#
发布于:2010-11-10 11:09
我的分辨率是1280×768的,http://userstyles.org/styles/36221这个运行OK,但不太和谐。。。

楼上各位改得使用默认主题的样式,我用了似乎都有问题,请问主要需要调整哪些参数才好:
边框和原来的背景没了
右边有个边界始终在显示
jiahuiqu
火狐狸
火狐狸
  • UID32722
  • 注册日期2010-05-03
  • 最后登录2012-10-09
  • 发帖数218
  • 经验10枚
  • 威望0点
  • 贡献值0点
  • 好评度0点
10楼#
发布于:2010-11-10 11:09
firefox_userA:我的分辨率是1280×768的,http://userstyles.org/styles/36221这个运行OK,但不太和谐。。。

楼上各位改得使用默认主题的样式,我用了似乎都有问题,请问主要需要调整哪些参数才好:
边框和原来的背景没了
右边有个边界始终在显示
回到原帖



left: -300px
just4fun
千年狐狸
千年狐狸
  • UID30408
  • 注册日期2009-09-17
  • 最后登录2016-04-28
  • 发帖数1497
  • 经验10枚
  • 威望0点
  • 贡献值0点
  • 好评度2点
11楼#
发布于:2010-11-10 11:09
能不能让书签工具栏也实现这种不压缩页面的效果?
alanfly
千年狐狸
千年狐狸
  • UID31035
  • 注册日期2009-11-10
  • 最后登录2024-05-19
  • 发帖数2769
  • 经验580枚
  • 威望1点
  • 贡献值128点
  • 好评度102点
  • 社区居民
  • 最爱沙发
  • 忠实会员
12楼#
发布于:2010-11-10 11:09
just4fun:能不能让书签工具栏也实现这种不压缩页面的效果? 回到原帖

那要把书签工具栏放在下面或者侧面才可以;




把原来的具体数值改成百分比了, 加了注释。
@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
#sidebar-splitter{display:none !Important;}
#sidebar-box{position:fixed !important;
/*调整侧边栏垂直位置*/
 top:85px; 
bottom:0px; 
/*显示有问题调整下面百分比*/
left: -30% !important;
 -moz-appearance: none !important;  -moz-transition: left .2s .4s ease-in; padding-right:20% !Important;}
#sidebar-box:hover { left:0px !important; -moz-transition: left .2s .1s ease-out;}
#sidebar-header{width:100%; -moz-appearance:none !important;}
#sidebar{height:100%; width:100%!important; border-right:2px inset -moz-use-text-color !important;}
just4fun
千年狐狸
千年狐狸
  • UID30408
  • 注册日期2009-09-17
  • 最后登录2016-04-28
  • 发帖数1497
  • 经验10枚
  • 威望0点
  • 贡献值0点
  • 好评度2点
13楼#
发布于:2010-11-10 11:09
刚找到一个,不用放在侧面或下面的
@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
@-moz-document url(chrome://browser/content/browser.xul) {

#main-window:not([inFullscreen="true"]) #navigator-toolbox:not([customizing="true"]) ~ #browser {
margin-top: -25px !important;/* 适当调整 */
}

#main-window:not([inFullscreen="true"]) #navigator-toolbox:not([customizing="true"]) > #PersonalToolbar {
-moz-transition: max-height 0s ease-in-out .1s !important;
-moz-box-ordinal-group: 1000 !important;
padding: 0 3px !important;
position: relative !important;
z-index: 100 !important;
overflow-y: hidden !important;
max-height: 1px !important;
min-height: 1px !important;
}

/*
#main-window[stylish-url="about:blank"] #navigator-toolbox:not([customizing="true"]) > #PersonalToolbar,*/
#main-window:not([inFullscreen="true"]) #navigator-toolbox:not([customizing="true"]):hover > #PersonalToolbar {
-moz-transition: max-height 0s ease-in-out !important;
max-height: 30px !important;
}

}
alanfly
千年狐狸
千年狐狸
  • UID31035
  • 注册日期2009-11-10
  • 最后登录2024-05-19
  • 发帖数2769
  • 经验580枚
  • 威望1点
  • 贡献值128点
  • 好评度102点
  • 社区居民
  • 最爱沙发
  • 忠实会员
14楼#
发布于:2010-11-10 11:09
just4fun:刚找到一个,不用放在侧面或下面的
@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
@-moz-document url(chrome://browser/content/browser.xul) {

#main-window:not([inFullscreen="true"]) #navigator-toolbox:not([customizing="true"]) ~ #browser {
margin-top: -25px !important;/* 适当调整 */
}

#main-window:not([inFullscreen="true"]) #navigator-toolbox:not([customizing="true"]) > #PersonalToolbar {
-moz-transition: max-height 0s ease-in-out .1s !important;
-moz-box-ordinal-group: 1000 !important;
padding: 0 3px !important;
position: relative !important;
z-index: 100 !important;
overflow-y: hidden !important;
max-height: 1px !important;
min-height: 1px !important;
}

/*
#main-window[stylish-url="about:blank"] #navigator-toolbox:not([customizing="true"]) > #PersonalToolbar,*/
#main-window:not([inFullscreen="true"]) #navigator-toolbox:not([customizing="true"]):hover > #PersonalToolbar {
-moz-transition: max-height 0s ease-in-out !important;
max-height: 30px !important;
}

}
回到原帖

  忘记了,这个还是我转过来的。
上一页
游客

返回顶部