Develop Reference

Vertical text writing with animation? Bug in the css code

I'm trying to write vertically the text in which the animation is included. After numerous attempts, I was unable to determine where I was wrong, or what to change in this code. Attached I am sending an image showing the output of the code.
If anyone knows the solution, let them leave a comment, thanks.
Additional explanation:
I want to write the text vertically. I have shown this in the picture. The picture shows that one part is written vertically, while the text in which I built the animation via css code, unfortunately remains written horizontally.
Now I'm confused, what do I need to change in the CSS code in order to get that text, which has animation, written via csss code, to be written vertically as well.
.test2 {
writing-mode: vertical-rl;
}
body {background:transparent;}
.smrtn1kloading {
font-family: "Arial Black", "Arial Bold", Gadget, sans-serif;
text-transform:uppercase;
width:150px;
text-align:center;
line-height:50px;
position:absolute;
left:0;right:0;top:50%;
margin:auto;
transform:translateY(-50%);
}
.smrtn1kloading span {
position:relative;
z-index:999;
color:#fff;
}
.smrtn1kloading:before {
content:'';
background:#1b8aca;
width:360px;
height:36px;
display:block;
position:absolute;
top:0;left:0;right:0;bottom:0;
margin:auto;
animation:2s smrtn1kloadingBefore infinite ease-in-out;
}
#keyframes smrtn1kloadingBefore {
0% {transform:translateX(-14px);}
50% {transform:translateX(14px);}
100% {transform:translateX(-14px);}
}
.smrtn1kloading:after {
content:'';
background:#242424;
width:14px;
height:60px;
display:block;
position:absolute;
top:0;left:0;right:0;bottom:0;
margin:auto;
opacity:.5;
animation:2s smrtn1kloadingAfter infinite ease-in-out;
}
#keyframes smrtn1kloadingAfter {
0% {transform:translateX(-50px);}
50% {transform:translateX(50px);}
100% {transform:translateX(-50px);}
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
<!-- begin snippet: js hide: false console: true babel: false -->
<table>
<tbody><tr><td><p class="test2">Preusmeri na <div class="smrtn1kloading">
<a href="https://ljubinko-stojanovic-smrtnik-privatna-baza-podataka.webnode.com/krajiske-lingvisticke-doskocice">
<span>Krajiške</span> <span>lingvističke</span> <span>doskočice.</span></a></div></p></td>
</tr></tbody></table>

How to make a CSS onhover menu vanish when clicking in mobile

So I'm using a hoverdown menu at the top of my good free photos site.
On desktop, it works just fine when you hover down on it, the menu appears.
When you hover off of it, it goes away.
However, mobile does not have the hover behaviour so when on mobile you click on the menu to make it appear, you can't get rid of it.
I need it to go away if you click on the menu (but not the sublinks) or anywhere else on the page.
Here is the HTML code I am using:
<div class="menu-wrap">
<nav class="menu">
<ul class="clearfix">
<li>
Good Free Photos Menu<span class="arrow">▼</span>
<ul class="sub-menu">
<li>Free Stock Photos</li>
<li>Public Domain Images</li>
<li>Featured</li>
<li>Last 100 images</li>
<li>News</li>
<li>Tutorials</li>
</ul>
</li>
</ul>
</nav>
</div>
and the css:
.clearfix:after {
display:block;
clear:both;
}
/*----- Menu Outline -----*/
.menu-wrap {
width:100%;
box-shadow:0px 1px 3px rgba(0,0,0,0.2);
background:#3e3436;
}
.menu {
width:1000px;
margin:0px auto;
}
.menu li {
margin:0px;
list-style:none;
font-family:'Ek Mukta';
}
.menu a {
transition:all linear 0.15s;
color:#919191;
}
.menu li:hover > a, .menu .current-item > a {
text-decoration:none;
color:#be5b70;
}
.menu .arrow {
font-size:11px;
line-height:0%;
}
/*----- Top Level -----*/
.menu > ul > li {
float:left;
display:inline-block;
position:relative;
font-size:19px;
}
.menu > ul > li > a {
padding:10px 40px;
display:inline-block;
text-shadow:0px 1px 0px rgba(0,0,0,0.4);
}
.menu > ul > li:hover > a, .menu > ul > .current-item > a {
background:#2e2728;
}
/*----- Bottom Level -----*/
.menu li:hover .sub-menu {
z-index:1;
opacity:1;
}
.sub-menu {
width:160%;
padding:5px 0px;
position:absolute;
top:100%;
left:0px;
z-index:-1;
opacity:0;
transition:opacity linear 0.15s;
box-shadow:0px 2px 3px rgba(0,0,0,0.2);
background:#2e2728;
}
.sub-menu li {
display:block;
font-size:16px;
}
.sub-menu li a {
padding:10px 30px;
display:block;
}
.sub-menu li a:hover, .sub-menu .current-item a {
background:#3e3436;
}
I know this may require some JavaScript, but I don't know what code.

You should read the following post :
CSS :hover behaviour on touchscreen devices
The problem with your current design is that it relies on the :hover state to work, which would not always work (for keyboard navigation, and causes problem with touchscreens).
A lot of accessible implementations for dropdown menus are well documented
Your current code may work within your current configuration, all you have to do is set the focus outside of your menu, for instance:
close menu
<div class="menu-wrap">
<nav class="menu">
But this won't make accessible your menu and won't make it work in the browsers where the :hover state is not recognized as :focus

Here's what I would do:
I would start by transferring the hover state from the css hover to a class name like .dropdown-open.
Using jquery:
if the website is viewed on a computer, control this class on mouseover and mousout.
else, toggle the class on mousedown of the element.
The jQuery would look something like this:
$(document).ready(function(){
function checkWidthForMenu(){
if($(window).width() > 760) {
$('.sub-menu').mouseover(function(){
$(this).addClass('dropdown-open');
});
$('.sub-menu').mouseout(function(){
$(this).removeClass('dropdown-open');
});
} else {
$(document).mousedown(function(){
$('.sub-menu.dropdown-open').removeClass('dropdown-open');
});
$('.sub-menu').mousedown(function(){
$(this).toggleClass('dropdown-open');
});
}
}
checkWidthForMenu();
$(window).resize(checkWidthForMenu());
});
Edit:
Adam has a good point for accessibility; so in your css, add the styles for the opened menu to .sub-menu.dropdown-open, .sub-menu:focus {...} This will make it open on hover and on focus (using the tab key as navigation)

Mobile Navigation Menu not working (HTML, CSS & JQuery)

I am attempting to make a mobile navigation menu based off of this example: Basic Hamburger Menu
However, for what ever reason it does not work. When I click on the button nothing happens except rotating the 3-line graphic. The menu does not expand / appear.
When troubleshooting I have found out that if .mobile is site for display:block; instead of display:none; when the page loads, the javascript works for collapsing / hiding the menu, and making it reappear. Only the rotation of the 3-line graphic is opposite of what it should be. So, I know the javascript is working.
I just can't understand why it doesn't work with the nav hidden by default like in the example. I have played around with it for more then 3 hours so far and have gotten nowhere. There for I"m attempting to post it here to see if anyone might have any idea as to what might be going on as I am at a complete loss and about ready to wave the white flag.
This is the javascript on my page:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$('button').click(function () {
$(this).toggleClass('expanded').siblings('div').slideToggle();
});
//# sourceURL=pen.js
</script>
And the HTML / CSS is the same as the example except I have modified it so all the links are built into a UL.
HTML Code:
<div id="main_container">
<header>
<img src="<?php echo get_template_directory_uri(); ?>/assets/header3.jpg" alt"logo" width="100%">
</header>
<nav>
<div id="desktop_nav"><?php wp_nav_menu( $args ); ?></div>
</nav>
<nav>
<div id="mobile_nav" class="mobile">
<button>Toggle</button>
<div>
<?php wp_nav_menu( $args ); ?>
</div>
</div>
</nav>
And CSS Code:
#mobile_nav ul {
display: table;
width: 100%;
/*table-layout:fixed;*/
}
.mobile {
display:none;
position:relative;
width:100%;
min-height:50px;
}
.mobile div {
display:none;
}
.mobile button {
position:absolute;
top:10px;
left: 10px;
border:0;
text-indent:200%;
overflow:hidden;
background:#363636 url(assets/menu.png) center no-repeat;
border-radius:3px;
background-size:80%;
width:30px;
height:30px;
outline:none;
transition:all 400ms ease;
-webkit-transition:all 400ms ease;
transition:all 400ms ease;
}
.mobile button.expanded {
-webkit-transform:rotate(90deg);
-ms-transform:rotate(90deg);
transform:rotate(90deg);
border:0;
}
.mobile ul li a {
display: block;
background: #000;
text-align: center;
padding: 20px 0;
border-bottom: 1px solid #363636;
text-decoration: none;
color: white;
width: auto;
}
.mobile ul li:last-child {
border-bottom: none;
display: table-cell;
}
.mobile ul li a:hover,
.mobile ul li a:active,
.mobile ul li a:focus {
background: #363636;
width: 100%;
}
#media (max-width: 800px) {
.mobile {
display:block;
}
.mobile div {display:block}
#desktop_nav {
display:none;
}
}
Thanks

Adding a class to the div called "toggle" and changing the format of the javascript to the following solved the issue.
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('button').click(function(){
jQuery(this).toggleClass('expanded');
jQuery(".toggle").slideToggle();
});
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Hover effect disappear after calling function through button

I have the following code which works only that not as I desire:
HTML:
<div class="horizontal-ribbon">
<div class="list" id="pseudoCheckBoxes">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</div>
<input type="button" id="but" value="next" onclick="check()">
CSS:
.horizontal-ribbon {
padding: 8px 8px 8px 8px;
background: #d6dbdf;
}
.list {
position:relative;
}
.list ul {
display:inline-block;
background:#d6dbdf;
margin:0;
padding:0;
border-radius:0px;
color:#ffffff;
}
.list ul li {
cursor: pointer;
cursor: hand;
display:inline-block;
vertical-align:middle;
border-radius: 50%;
width:14px;
height:14px;
padding:0px;
background:#fff;
border: 5px solid #d6dbdf;
color: #ffffff;
text-align:center;
font: 700 13px"Lato", Helvetica, Arial sans-serif;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-transition: background 0.2s ease-out, border-color 0.2s ease-out;
transition: background 0.2s ease-out, border-color 0.2s ease-out;
}
.list ul li:first-child {
margin-left: 20px;
}
.list ul li:last-child {
margin-right: 20px;
}
.list ul li:hover {
background:#1abc9c;
border-color:#1abc9c;
}
JAVASCRIPT:
function check() {
element = document.getElementById("pseudoCheckBoxes");
items = element.getElementsByTagName("LI");
items[0].style.backgroundColor = "#1abc9c";
items[0].style.borderColor = "#1abc9c";
setTimeout(function () {
uncheck()
}, 2000);
}
function uncheck() {
element = document.getElementById("pseudoCheckBoxes");
items = element.getElementsByTagName("LI");
items[0].style.backgroundColor = "white";
items[0].style.borderColor = "#d6dbdf";
}
I wish to control that effect both from button press and by hovering the mouse of <li> elements.
The hover effect works well but after I click the button next the hover effect disappears and I don't know why. Please be kind and help me (http://jsfiddle.net/xfpyM/).

You are applying :hover effect using CSS hover and adding inline style after clicking the next button.
You can try doing it by adding class.
Here is the demo
JS
function check(){
element=document.getElementById("pseudoCheckBoxes");
items=element.getElementsByTagName("LI");
items[0].className ="active";
setTimeout(function(){uncheck()}, 2000);
}
function uncheck(){
element=document.getElementById("pseudoCheckBoxes");
items=element.getElementsByTagName("LI");
items[0].className=" ";
}
CSS
.list ul li.active,
.list ul li:hover{
background:#1abc9c;
border-color:#1abc9c;
}

Your uncheck function have some error. Instead of removing style attribute you are adding different styels. So the actual hover style not applying.
Instead of this
function uncheck() {
element = document.getElementById("pseudoCheckBoxes");
items = element.getElementsByTagName("LI");
items[0].style.backgroundColor = "white";
items[0].style.borderColor = "#d6dbdf";
}
Use like this.
function uncheck() {
element = document.getElementById("pseudoCheckBoxes");
items = element.getElementsByTagName("LI");
items[0].removeAttribute("style");
}
DEMO

How to convert a css only megamenu to jquery based

I am using a megamenu in my site, which is purely css based. The disadvantage is that, it doesn't have any animation. The dropdown is getting show all on a sudden. So I am thinking of converting it to jquery based toggle. Here is the current code. How can I convert it to jQuery based?
.dropdown-1column,
.dropdown-2columns,
.dropdown-3columns,
.dropdown-4columns,
.dropdown-5columns {
margin:-1px auto 0 -285px;
float:left;
position:absolute;
text-align:left;
padding:10px 5px 10px 5px;
border:1px solid #dedede;
background:#fff;
z-index:999;
display:none;
}
.menu li:hover .dropdown-1column,
.menu li:hover .dropdown-2columns,
.menu li:hover .dropdown-3columns,
.menu li:hover .dropdown-4columns,
.menu li:hover .dropdown-5columns {
display:block;
}
Here is the code http://jsfiddle.net/gsTNS/

This pretty much does what you're looking for I think. Could probably be refined:
http://jsfiddle.net/gsTNS/5/
Basically I've added a class of "has-dropdown" to each LI that has a dropdown and I've added a "dropdown" class to each dropdown DIV.
Then use jQuery to activate a slideToggle function:
jQuery("div#menu ul.menu li.has-dropdown").hover(
function () {
$(this).find("div.dropdown").slideToggle();
},
function () {
$(this).find("div.dropdown").slideToggle();
}
);