I'm quite new to CSS and out of ideas about how to make this kind of navigation work. By default, the navigation should look like this:
When the contact section is hovered, it looks like this:
And of course, it should work the other way around as well:
You can see my markup, CSS and demo here: https://jsfiddle.net/xr2jp5r9/. I'll paste the HTML/CSS here too:
<body>
<div id="navigation-menu">
<div id="portfoolio">
<h4>PORTFOOLIO</h4>
<nav id="portfoolionav">
<ul>
<li>sisearhitektuur</li>
<li>graafiline disain</li>
<li>tootedisain</li>
</ul>
</nav>
</div>
<!--end portfoolio-->
<div id="kontakt">
<h4>KONTAKT</h4>
<p id="kontaktadd">Männiku tee 31a, 11214, Tallinn, Estonia</p>
</div>
<!--end kontakt-->
</div>
<!--end navigation-menu-->
</body>
And the CSS:
.body
{
background-color: white;
}
#navigation-menu
{
height: 100px;
line-height: 100px;
font-family: 'Lato', sans-serif;
}
#portfoolio
{
position: fixed;
color: white;
text-align: right;
top: 0px;
left: 0px;
width: 50%;
background-color: #3BB6E4;
transition: all 2s ease-in-out;
-webkit-transition: all 2s ease-in-out; /** Chrome & Safari **/
-moz-transition: all 2s ease-in-out; /** Firefox **/
-o-transition: all 2s ease-in-out; /** Opera **/
}
#portfoolio h4
{
padding-right: 30px;
}
#portfoolio:hover
{
width: 90%;
z-index: 400;
}
#portfoolionav ul
{
list-style-type: none;
}
#portfoolionav li
{
display: inline;
padding: 20px;
}
#kontakt
{
color: white;
text-align: left;
top: 0px;
right: 0px;
width: 50%;
position: fixed;
background-color: #E8940D;
transition: all 2s ease-in-out;
-webkit-transition: all 2s ease-in-out; /** Chrome & Safari **/
-moz-transition: all 2s ease-in-out; /** Firefox **/
-o-transition: all 2s ease-in-out; /** Opera **/
}
#kontakt h4
{
padding-left: 30px;
}
#kontakt:hover
{
width: 90%;
}
So how can I center all the sections to one line + hide the submenu and the address? Also, the submenu and the address are sliding along when hovering, they shouldn't do that.
I hope that someone can help me, I'd really appreciate this. Thanks. :)
Maybe you could use something like the typical carousel system.
A container with both of the menus at their greatest size, and a "window" div with specific width (here the page's one) and slide components in it.
Do not change menus widths but theirs positions in the big container.
We could just see menus sliding/moving, and during this movement you can easily change the title font-size.
You can use Jquery to find and manage the best menus widths when the page loads or resize.
Sry for my english ;)
Related
I am trying to make it so that the H2 and the span text has a bit of a bounce effect towards the end of the hover animation I've created. What I am trying to do can be seen in the following example. Just to be clear in that example, SCSS is being used. I am not using SCSS so I am not 100% sure what I am trying to do is possible with just plain CSS but I sure hope it is because that is what I am using for my project. So the code below shows you what I was able to do. The H2 and span text have a basic start point and end point animation on hover. I want it to have a little bounce towards the end(like in the linked example I shared) something I feel I need to add key-frames to in order to achieve. But I don't know if its even possible to add a key-frame animation on hover especially if I want it to animate back to its original position on mouse out. Am I wrong about this? I appreciate any solutions you guys might have. thank you.
body {
background-color: black;
}
.featured-list li {
display: inline-block;
margin-right: .8%;
}
.featured-list a {
display: block;
}
.featured-list {
text-align: center;
padding: 0;
margin: 0 auto;
}
a.feature-img img {
width: 425px;
border-radius: 5px;
transition: .2s linear;
}
a.feature-img {
text-align: center;
}
.f-cta, .f-img-content h2 {
font-family: 'Abel',Helvetica,Arial,Lucida,sans-serif;
font-weight: 100;
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
}
.f-img-content h2 {
color: #fff;
top: -60%;
transition: .2s linear;
}
.f-cta {
background: #fff;
width: 50%;
border-radius: 3px;
padding: 7px;
color: #000;
top: 120%;
font-size: 1.3em;
transition: .2s linear;
}
.f-img-content {
position: relative;
text-align: center;
overflow: hidden;
}
a.feature-img:hover img {
opacity: .6;
}
a.feature-img:hover h2 {
transform: translateY(1065%);
}
a.feature-img:hover span.f-cta {
transform: translateY(-600%);
}
<ul class="featured-list">
<li><a href="#" class="feature-img">
<div class="f-img-content">
<img src="https://i.imgur.com/EENJU66.gif">
<h2>Lorem Ipsum project title</h2>
<span class="f-cta">View Project</span>
</div>
</a></li>
<!--li><a href="#" class="feature-img">
<img src="https://i.imgur.com/EENJU66.gif">
</a></li>
<li><a href="#" class="feature-img">
<img src="https://i.imgur.com/EENJU66.gif">
</a></li>
<li><a href="#" class="feature-img">
<img src="https://i.imgur.com/EENJU66.gif">
</a></li-->
</ul>
You just need cubic-bezier transitions.
Something like this one - https://easings.net/#easeInOutBack
Or the same as this from your example:
transition:all .3s cubic-bezier(.3, 0, 0, 1.3);
Just play around with it :)
I am having a hover issue. Whenever I hover over a specific .servNavItemTitle the font weight for the other .servNavItemTitle decreases for a moment and then goes back to normal quickly.
To see it in the demo, just hover over one of the titles and watch the other titles as the font-weight reduces.
Does anyone see what the issue is?
Here is a jsfiddle demo
Here is a narrowed down version of the code:
.servNavItemWrap {
display: inline-block;
vertical-align: top;
width: 25%;
margin-bottom: 50px;
text-align: center;
cursor: pointer;
}
.servNavItemWrap img {
width: 75px;
height: 75px;
-webkit-transition: all 0.25s;
transition: all 0.25s;
}
.servNavItemWrap:hover img {
-webkit-transition: all 0.25s;
transition: all 0.25s;
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.servNavItemWrap a {
text-decoration: none;
outline: none;
}
.servNavItemTitle {
margin-top: 5px;
-webkit-transition: all 0.25s;
transition: all 0.25s;
}
.servNavItemWrap:hover .servNavItemTitle {
color: #FFF;
-webkit-transition: all 0.25s;
transition: all 0.25s;
}
<div id="serviceNavBlock2" class="iblock">
<div class="servNavItemWrap">
<a href="http://localhost:8080/profile.php">
<img src="" alt="Aluminum Profile">
<span class="servNavItemTitle hGc block">Aluminum</span>
</a>
</div>
<div class="servNavItemWrap">
<a href="#">
<img src="" alt="Aluminum Components">
<span class="servNavItemTitle hGc block">Components</span>
</a>
</div>
After Temani narrowed down the issue, I searched and found the answer here: css transform element affects other element which use transform:scale(0.5) in android webview . Basically, I added -webkit-backface-visibility: hidden; to the scaled image and it works perfectly now.
I want to implement search box that appears on button click and hides on click somewhere outside. I'm trying to implement this with css.
I have next html:
<div tabindex="0" class="search">
<div id="mobileSearch" class="search-by-name form-group ember-view">
<div tabindex="0" role="button" id="ember415" class="ember-power-select-trigger ember-power-select-typeahead-trigger ember-basic-dropdown-trigger ember-view">
<input type="search" id="ember-power-select-typeahead-input-ember410" class="ember-power-select-typeahead-input ember-power-select-search-input">
</div>
<div id="ember-basic-dropdown-content-ember410" style="display: none;" class="ember-basic-dropdown-content-placeholder"></div>
</div>
<div type="button" class="btn mobile-search-button"></div>
</div>
And scss:
.navbar {
> .container-fluid {
> .navbar-header {
> .search {
> #mobileSearch {
width: 42px;
height: 42px;
display: inline;
> div {
margin-top: 15px;
display: inline;
height: 42px;
position: absolute;
min-width: 0;
max-width: 0;
margin-left: 42px;
padding: 0;
border: none;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}
}
}
> .search:focus {
outline: none;
}
.search > #mobileSearch > div:focus,
> .search:focus > #mobileSearch > div {
min-width: 220px;
max-width: 220px;
padding: 2px 16px 2px 8px;
margin-left: -178px;
border: 1px solid #ccc;
}
.mobile-search-button {
width: 42px;
height: 42px;
margin-top: 15px;
background-color: transparent;
background-image: url('/assets/search-128.png');
background-size: cover;
}
}
}
}
When user clicks on button search box appears, and when he clicks outside it hides. This part works OK. But when user move focus to input field search box also hides. I understand that issue was related to search box structure (div with div with div with input) but I can't change last layers (div with input) because it is plugin's component.
I would prefer a solution without Javascript.
try
.search:focus-within
it will work with .search and all child elements
I have a hidden sidebar menu on my website, if I open my website on my desktop, my hidden sidebar has 100px width (not full), so to reveal it all you must do is hover over it. If I open my website on a mobile device, my hidden sidebar has no width, and I must click the button to reveal the sidebar.
HTML:
<div id="mySidenav" class="sidenav sidenav-wrapper">
<img class="logo1" src="../img/logo1.png"><br><br>
Home
About
Contact
</div>
<div id="contoh" class="content-section-b">
<div class="mobiletoggle">
<label class="fa fa-bars" for="showblock"></label>
<input type="checkbox" id="showblock" />
</div>
</div>
In the code above I use checkbox to change 'click', because I just want to use CSS.
CSS:
.sidenav {
height: 100%;
width: 100px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
padding-top: 60px;
transition: 0.8s;
}
.logo1 {
height: 10%;
width: auto;
padding-left: 20px;
transition: 0.8s;
}
.sidenav:hover {
width: 250px;
transition: 0.8s;
}
.sidenav:hover ~ #contoh {
background-color: rgba(0,0,0,0.4);
filter: grayscale(100%);
}
.sidenav:hover .logo1 {
height: auto;
width: 95%;
padding-left: 10px;
transition: 0.8s;
}
.sidenav a {
float:left;
width:100%;
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 20px;
color: #818181;
display: block;
opacity: 0;
transition: opacity 1300ms
}
.sidenav a:hover, .offcanvas a:focus {
color: #f1f1f1;
background-color:#5fa2db;
font-size: 30px;
}
#showblock {
display: none;
}
#media screen and (min-width:768px) {
.mobiletoggle {
display:none;
}
}
#media screen and (max-width:767px) {
.sidenav {
width:0px;
}
#showblock:checked + .sidenav {
width: 250px;
transition: 0.8s;
}
}
In the code above I used :checked, it's just a little bit different if I use :active. The problem is why my :checked/:active did not work? I looked into this jsFiddle, and it works fine, so why can't I use it? Any suggestions?
As per your CSS, modify your HTML to:
<input type="checkbox" id="showblock">
<div id="mySidenav" class="sidenav sidenav-wrapper">
<img class="logo1" src="../img/logo1.png"><br><br>
Home
About
Contact
</div>
<div id ="contoh" class="content-section-b">
<div class="mobiletoggle">
<label class="fa fa-bars" for="showblock"></label>
</div>
</div>
The input #showblock should be above the div #mySidenav in order for your CSS to work.
#showblock:checked + .sidenav {
width: 250px;
transition: 0.8s;
}
Is it possible to change the tumblr default like/reblog buttons and insert an img? I'm trying to change my like button to http://38.media.tumblr.com/tumblr_m7wvvwuZdH1r17mw1.png
(excuse the link. I can't post images yet because of reputation/I'm a newbie.)
.
here is what my like/reblog button code looks like
<div id="buttons">
<div class="buttoned">{LikeButton size="14" color="black"}</div>
<div class="buttoned">{ReblogButton size="14" color="black"}</div>
and
/* BUTTONS */
#buttons {
width: 18px;
height: auto;
position:absolute;
margin: -5px 0 0 540px;
}
.buttoned {
width:14px;
height:14px;
padding: 2px;
margin: 0 auto 4px auto;
background-color: {color:buttons};
border: 1px solid {color:buttons};
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}
.buttoned img {
width: 14px;
height: 14px;
margin: auto;
text-align:center;
}
Here is the blog I am trying to change it on. http://kobisart.tumblr.com/
As you can see I'm trying on the like button. It allowed me to put the img but it won't let me use it as the like button
Thanks
A reblog button can be achieved with the undocumented {ReblogURL}.
<img src="img.png">
An alternate like button can be achieved via this previously answered question.