emunoz

Changing the puller to open and close the menu

Blog Post created by emunoz on Nov 14, 2017

I've received some feedback about the puller that opens and closes the course menu, especially in smaller screens. To offer an options, I have been working in some CSS to turn the bar and little arrow into a tab.

Menu open:

Captura de pantalla_2017-09-04_18-27-54.png

Menu closed:

Captura de pantalla_2017-09-04_18-28-03.png

Here is the code and a little explanation on my part:

/*puller*/

here we set the tab to be as tall as the cousre menu, not rounded borders and always visible.

#puller.pullcollapsed a, #puller a {height: 32px; width: 32px; opacity: 1; border:0; border-radius:0;}

Now we turn the background black, as our course menu to make it look as one block. By request of a client, I changed the arrow originally there for an image (one for open and one for closed)

#puller.pullcollapsed a {background: url("images/arrow-fwd-w.png") no-repeat center center #000000;}

#puller a {background: url("images/arrow-rew-w.png") no-repeat center center #000000;}

#puller a img {display:none;}

Place the "tab" correctly

#puller {right: -32px!important; top:0;}

center the arrow and remove shadows, and borders. content:none hides the original arrow as we have replaced it with an image earlier

#puller a:after {left:9px;}

#puller a:after, #puller.pullcollapsed a:after {position:relative; right:0; top:0; border:0; text-shadow:none; padding:0; background-color:#000000; line-height: 32px; opacity: 1; content:none;}

this is to make it not change while in hover

#puller.pullcollapsed a:hover, #puller.pullcollapsed a:focus,  #puller a:hover, #puller a:focus {background-color: #000000;}

 

I have to say that the version shown up in the images is not corresponding to the code. The images are from earlier tests and therefore is still a little round in the corners, and  has a border, but you get the idea :-)

I'll be glad to help if you have questions about the code. HTH!

Ester

Outcomes