Js tab navigation override on page load, and toggle button

Hi

Thanks to PaulOB and some tweaking by myself I’ve got this
ttri dot biz/test_sidebar/
to almost what I need.

The problem is that when loading/refreshing the page or clicking on any menu item/tab the sidebar and content are moved to the top of window hiding the first row (logo).
How can I keep the top row showing?

Also when at smaller screen size when the toggle gets in the content jumps up and covers the menu, I’d like to either keep it at the bottom of last menu item/tab or better yet have the menu collapse back and keep the logo and toggle button visible.

I think they are somehow related thus one thread, if you think I should split into two thread please let me know.

Thank you

do you have this uploaded and running? If so, a link would greatly help

Thank you.

Yes it is in the op:
ttri dot biz/test_sidebar/

long shot, but try adding to the css

html{
overflow-y: scroll !important;}
}

Hi,

That’s the problem with the :target selector because it works by jumping to the fragment identifier and is a browser behaviour that can’t really be avoided easily. That’s why I mentioned using the checkbox hack instead which doesn’t suffer from this issue but needs specific html arrangements.

You can read up on the jumping effect here and associated problems.

There is an old fix for this but means adding superfluous html for the target links which are fixed positioned so that no jump occurs.

Here’s what you would need to do.

Comment out the section of css as shown below and add in the new css.

/* FZ controls the tab behaviour - coupled with js
.fz-content > div {
	display:none
}

.fz-content > div:target {
	display: block
}

.fz-content > div.first-tab {
	display:block
}
 */
.tab{display:none}
.target {
  display: block;
  top: 0;
  left: 0;
  position: fixed;
}
.t1:target ~ .tab1{display:block}
.t2:target ~ .tab2{display:block}
.t3:target ~ .tab3{display:block}
.t4:target ~ .tab4{display:block}
.t5:target ~ .tab5{display:block}

Then adjust the html in this section with the new elements, ids and classes.

<div class="container">
		<div class="fz-content">
				<div class="target t1" id="item-1"></div>
				<div class="target t2" id="item-2"></div>
				<div class="target t3" id="item-3"></div>
				<div class="target t4" id="item-4"></div>
				<div class="target t5" id="item-5"></div>
				<div class="tab tab1 fz-first-tab">
						<h1>test 01</h1>
						<p> test one </p>
						<p> 01 </p>
				</div>
				<div class="tab tab2" >
						<h1>test 02</h1>
						<p> test two - 02 </p>
				</div>
				<div class="tab tab3">
						<h1>test 3</h1>
						<p> test three - 03 </p>
				</div>
				<div class="tab tab4">
						<h1>test 4</h1>
						<p> test four </p>
						<p> 04 </p>
						<p> some text </p>
						<p> some more text making the content longer some more text making the content longer some more text making the content longer 
								some more text making the content longer some more text making the content longer some more text making the content longer 
								some more text making the content longer some more text making the content longer some more text making the content longer 
								some more text making the content longer some more text making the content longer some more text making the content longer 
								some more text making the content longer some more text making the content longer some more text making the content longer 
								some more text making the content longer some more text making the content longer some more text making the content longer 
								some more text making the content longer some more text making the content longer some more text making the content longer 
								some more text making the content longer some more text making the content longer some more text making the content longer 
								some more text making the content longer some more text making the content longer some more text making the content longer 
								some more text making the content longer some more text making the content longer some more text making the content longer 
								some more text making the content longer some more text making the content longer some more text making the content longer 
								some more text making the content longer some more text making the content longer some more text making the content longer 
								some more text making the content longer some more text making the content longer some more text making the content longer 
								some more text making the content longer some more text making the content longer some more text making the content longer 
								some more text making the content longer some more text making the content longer some more text making the content longer 
								some more text making the content longer some more text making the content longer some more text making the content longer 
								some more text making the content longer some more text making the content longer some more text making the content longer 
								some more text making the content longer some more text making the content longer some more text making the content longer 
								some more text making the content longer some more text making the content longer some more text making the content longer 
								some more text making the content longer some more text making the content longer some more text making the content longer 
								some more text making the content longer some more text making the content longer some more text making the content longer 
								some more text making the content longer some more text making the content longer some more text making the content longer 
								some more text making the content longer some more text making the content longer some more text making the content longer 
								some more text making the content longer some more text making the content longer some more text making the content longer </p>
				</div>
				<div class="tab tab5">
						<h1>test 5</h1>
						<p> test five </p>
						<p> 05 </p>
				</div>
		</div>
</div>
<!-- .container --> 

The above is tested and working and no longer jumps. Make sure you add the correct ids and classes.

Thank you both.

@pr0c3ss
I have tested your suggestion, and it did not work.

@PaulOB
I have no words to compliment you, save I wish I had 5% of your knowledge … maybe some day I’ll get to 1%

I’d like to share that I do read and try to learn all the stuff you kindly link to.
While going on with this, on the side I am trying to use/test the checkbox hack to get what I am after, hopefully I’ll have two options to choose from on the road.

Thanks again.

EDIT
p.s.
I have changed the class names with my own convention (basically adding fz prefix) to avoid confusion to myself, hope you don’t mind.

That’s fine you should always go with your own method of identification. I just changed them to make it simpler to see in the demo.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.