3

Being as specific as I possibly can, here goes... I'm trying to implement sub navigation within a circle however the content out fits the shape and has required a scrollbar to fix this problem.

I now have a problem that I have difficulty with despite trying CSS to make it work. Currently the scrollbar on the sub navigation scrolls vertically outside of the circle and the content seems to come out.

See the screengrab below. The sub nav content is coming too high out of the div and the scrollbar is scrolling to far down. Ideally I'd like the content to be within the red area highlighted and the scrollbar as in blue.

Screengrab

CSS for the scrollbar (.jb_scrollbar):

.jb_scrollbar { clear: both; margin: 0px 0 10px;}
.jb_scrollbar .viewport { overflow: hidden; position: relative; }
.jb_scrollbar .overview { list-style: none; position: absolute; left: 0; top: 0; }
.jb_scrollbar .thumb .end,
.jb_scrollbar .thumb { margin: 50px 0 0 0; background-color: #ccc; }
.jb_scrollbar.scroll_y .scrollbar { position: relative; float: right; width: 10px;}
.jb_scrollbar.scroll_x .scrollbar { position: relative; height: 15px;clear:both;margin:0 0 5px;}
.jb_scrollbar.scroll_y .track { height: 100%; width:13px; position: relative; padding: 0 1px;}
.jb_scrollbar.scroll_x .track { width: 100%; height:7px; position: relative; padding: 1px 0px;}
.jb_scrollbar.scroll_y .thumb { height: 20px; width: 13px; cursor: pointer; overflow: hidden; position: absolute; top: 0; background: #d5d089;}
.jb_scrollbar.scroll_x .thumb { height: 13px; cursor: pointer; overflow: hidden; position: absolute; left: 0; background: #d5d089;}
.jb_scrollbar.scroll_y .thumb .end { overflow: hidden; height: 5px; width: 13px; background: #d5d089;}
.jb_scrollbar.scroll_x .thumb .end { overflow: hidden; width: 5px; height: 0px; background: #d5d089;}
.jb_scrollbar .disable{ display: none;}

CSS for the Sub navigation (#vertmenu):

#vertmenu { font-family: Arial, Helvetica, sans-serif; font-size: 100%; width: 221px; height: 221px; background: url(../images/subnav_bg.png) no-repeat; margin-top: 20px; float: left;  clear: both;}
#vertmenu a.nav-path-selected{ color:#000; border-bottom: 2px solid #23b3e9; margin-bottom: -2px; }
#vertmenu a:hover{ color:#000; border-bottom: 2px solid #23b3e9; margin-bottom: -2px; }
#vertmenu ul { list-style: none; margin: 40px 0 50px 10px; border: none; float:left; height: 150px; width: 130px; }
#vertmenu ul li { margin: 0px; padding: 3px 0 3px 14px; clear: both; background: url(../images/subnav_bullet_bg.png) no-repeat left center; }
#vertmenu ul li a { font-size: 14px; line-height: 14px; text-transform: none; display: block; text-decoration: none; color: #000000;}

If you can be so kind to help me spot the problem that would be very much appreciated. Been scratching my head over the CSS to position it correctly for ages.

Many thanks

1 Answer 1

1

I am not sure how to do it with that scrollbar plugin, but here is a quick demo using only CSS: http://jsbin.com/icelih/4/edit

The plugin sets sizes in inline styles and seems to require a good chunk of boilerplate markup, and I was having to pore over the (confusing) documentation to tell what parts are your site and what parts are inserted/required by the plugin.

So instead I created an isolated mockup which you can perhaps use to fix your site: http://jsbin.com/ilebaz/1/edit

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.