Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I want to make my responsive tabs to drop down like this
Desktop/Large Screen View
Mobile View
This is what code i have and I don't know if this is can be done using CSS only or need Javascript/jQuery.
<div class="bottomRight">
<input type="radio" id="popularUpload" name="upload" checked="checked">
<label for="popularUpload" class="popularUpload">Popular Uploads</label>
<input type="radio" id="recentUpload" name="upload">
<label for="recentUpload" class="recentUpload">Recent Uploads</label>
<input type="radio" id="gallery" name="upload">
<label for="gallery" class="gallery">Gallery</label>
<div class="popUploadContent">...</div>
<div class="recUploadContent">...</div>
<div class="galleryContent">...</div>
</div>
And here is my CSS code.
#popularUpload,
#recentUpload,
#gallery {
display: none;
}
.popularUpload {
font-size: 15px;
font-weight: bold;
color: #dddfe2;
background: #111625;
padding: 20px 4%;
position: relative;
cursor: pointer;
z-index: 500;
display: block;
width: 120px;
text-align: center;
float: left;
}
.recentUpload {
float: left;
font-size: 15px;
font-weight: bold;
color: #dddfe2;
background: #111625;
padding: 20px 4%;
position: relative;
cursor: pointer;
z-index: 500;
display: block;
width: 110px;
text-align: center;
border-right: 1px solid #0b0e18;
border-left: 1px solid #0b0e18;
}
.gallery {
float: left;
font-size: 15px;
font-weight: bold;
color: #dddfe2;
background: #111625;
padding: 20px 4%;
position: relative;
cursor: pointer;
z-index: 500;
display: block;
width: 60px;
text-align: center;
}
.popularUpload:hover,
.recentUpload:hover,
.gallery:hover {
color: #eeb10c;
transition: all .5s ease;
}
#popularUpload:checked + label,
#recentUpload:checked + label,
#gallery:checked + label {
background: #0b0f17;
color: #eeb10c;
transition: all .5s ease;
}
#popularUpload:checked ~ .popUploadContent,
#recentUpload:checked ~ .recUploadContent,
#gallery:checked ~ .galleryContent {
visibility: visible;
transition: all .3s ease;
}
.popUploadContent,
.recUploadContent,
.galleryContent {
visibility: hidden;
background: #0b0f17;
position: absolute;
margin-top: 54px;
height: 299px;
}
.popUploadContentLeft,
.recUploadContentLeft,
.galleryContentLeft {
float: left;
width: 46.4%;
margin-left: 2.5%;
margin-top: 19px;
}
Or if you can suggest and edit my code, that will be better. Here is my JSFiddle https://jsfiddle.net/8druLycp/
You can use Bootstrap tabs : http://getbootstrap.com/javascript/#tabs. (Using javascript and jQuery), then personnalize it with CSS ?
EDIT 1
To make it responsive without using the solution above, still use Boostrap with its system of grid (e.g. col-md-3 col-sm-4 col-xs-12). So when it will be a small screen, each part of your tabs menu will take the full width. Check it out https://getbootstrap.com/examples/grid/
EDIT 2
An other solution and all I can suggest you for now and that works is to applicate this : http://tabcollapse.okendoken.com. See the demo : http://tabcollapse.okendoken.com/example/example.html
EDIT 3
Finally, here is a solution with the dropdown menu : https://jsfiddle.net/Alteyss/wypp0hz8/ :
div#tabsBlock > ul.nav-tabs > li.dropdown {
display: none;
}
#media screen and (max-width: 500px) {
div#tabsBlock > ul.nav-tabs > li.lg {
display: none;
}
div#tabsBlock > ul.nav-tabs > li.dropdown {
display: block;
}
}
I've set a limit (500px that you can change) so when it's under 500px width, the dropdown appears and the other tabs disappear. Then, you can personnalize it as you want in css in your web site ;)
(With pills : https://jsfiddle.net/Alteyss/wypp0hz8/5/)
I think a possible solution to you is to hide not selected tabs and give all of them a 100% width. Then you can add a class to control its display, this class can be toggled with very simple jQuery.
I show you an example on the snnipet. The only thing left is to control the active tab to show its label when is selected and use a caret to control the class toggle instead of the label.
To apply this to the mobile version only, just add it with a media-query.
$(function(){
$('.popularUpload').on('click', function(){
$('.recentUpload').toggleClass('shown');
$('.gallery').toggleClass('shown');
});
});
#popularUpload,
#recentUpload,
#gallery {
display: none;
}
.popularUpload {
font-size: 15px;
font-weight: bold;
color: #dddfe2;
background: #111625;
padding: 20px 4%;
cursor: pointer;
z-index: 500;
display: none;
width: 100%;
text-align: center;
float: left;
}
.popularUpload.shown{
display: block;
}
.recentUpload {
display: none;
float: left;
font-size: 15px;
font-weight: bold;
color: #dddfe2;
background: #111625;
padding: 20px 4%;
cursor: pointer;
z-index: 500;
width: 100%;
text-align: center;
border-right: 1px solid #0b0e18;
border-left: 1px solid #0b0e18;
}
.recentUpload.shown{
display: block;
}
.gallery {
display: none;
float: left;
font-size: 15px;
font-weight: bold;
color: #dddfe2;
background: #111625;
padding: 20px 4%;
cursor: pointer;
z-index: 500;
width: 100%;
text-align: center;
}
.gallery.shown {
display: block;
}
.popularUpload:hover,
.recentUpload:hover,
.gallery:hover {
color: #eeb10c;
transition: all .5s ease;
}
#popularUpload:checked + label,
#recentUpload:checked + label,
#gallery:checked + label {
background: #0b0f17;
color: #eeb10c;
transition: all .5s ease;
}
#popularUpload:checked ~ .popUploadContent,
#recentUpload:checked ~ .recUploadContent,
#gallery:checked ~ .galleryContent {
display: block;
transition: all .3s ease;
}
.popUploadContent,
.recUploadContent,
.galleryContent {
display: none;
background: #0b0f17;
height: 299px;
width: 100%;
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bottomRight">
<input type="radio" id="popularUpload" name="upload" checked="checked">
<label for="popularUpload" class="popularUpload shown">Popular Uploads</label>
<input type="radio" id="recentUpload" name="upload">
<label for="recentUpload" class="recentUpload">Recent Uploads</label>
<input type="radio" id="gallery" name="upload">
<label for="gallery" class="gallery">Gallery</label>
<div class="popUploadContent">popular content</div>
<div class="recUploadContent">recent content</div>
<div class="galleryContent">gallery content</div>
</div>
Related
I have a text input nested in a parent div. When you type in the text input, a "delete text" button appears. When the "delete text" button appears, it causes its parent div "headerSearch" to decrease in height from 71px to 70px in Safari only.
When the "delete text" button is hidden again, the parent div "headerSearch" has it's height go back from 70px to 71px.
Why does displaying the "delete text" button cause the parent div "headerSearch" to change its height in Safari, and how do I prevent it?
Try the code snippet below using Safari where I reproduced the problem.
function deleteSearchBarContents() {
document.getElementById('searchBox').value = "";
document.getElementById("searchBox").focus();
document.getElementById("deleteSearchBarContentsButton").style.display = "none";
}
document.getElementById("deleteSearchBarContentsButton").addEventListener("click", deleteSearchBarContents);
function showDeleteSearchBarContentsButton() {
// If value is not empty
if (document.getElementById("searchBox").value.trim() == "") {
// Hide the element
document.getElementById("deleteSearchBarContentsButton").style.display = "none";
} else {
// Otherwise show it
document.getElementById("deleteSearchBarContentsButton").style.display = "inline-block";
}
}
document.getElementById("searchBox").addEventListener("keyup", showDeleteSearchBarContentsButton);
.wrapperSearch {
max-width: 100%;
overflow: hidden;
min-height: 1111px;
margin: 0 auto;
position: relative;
}
.headerSearch {
background: #3f3f3f;
position: relative;
display: inline-block;
width: 100%;
}
.entireSearchContainer {
margin-left: 29.034px;
}
.entireSearchContainer .searchBar {
display: inline-block;
width: 400px;
margin-top: 22.82px;
height: 46.978px;
background-color: #fff;
}
.entireSearchContainer .searchBar .searchBarInner {
display: inline-flex;
display: -webkit-inline-flex;
width: 100%;
height: 47px;
}
.entireSearchContainer .searchBar .searchBox {
flex: 1;
border: none;
background-color: transparent;
padding: 17.944px;
font-size: 16px;
outline: 0;
box-shadow: none;
-webkit-appearance: none;
}
.deleteSearchBarContentsButton {
display: none;
border: none;
background-color: transparent;
height: 46.978px;
border-radius: 2.618px;
margin-top: 0;
justify-content: center;
outline: 0!important;
cursor: pointer;
display: inline;
color: #252525!important;
display: none;
padding-right: 0;
width: 17.944px;
margin-left: 11.09px;
color: #888;
margin-right: 0;
overflow: hidden;
}
.entireSearchContainer .searchBar .searchButton {
border: none;
background-color: transparent;
height: 46.978px;
border-radius: 2.618px;
margin-top: 0;
width: 46.978px;
padding-right: 17.944px;
justify-content: center;
outline: 0!important;
cursor: pointer;
display: inline-block;
overflow: hidden;
}
.searchButton img {
width: 16px;
height: 16px;
vertical-align: middle!important;
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
.deleteSearchBarContentsButton {
display: none;
padding-right: 0!important;
width: 17.944px!important;
margin-left: 11.09px!important;
}
.deleteSearchBarContentsButton img {
width: 11px!important;
height: 11px!important;
vertical-align: middle!important;
}
<div class="wrapperSearch">
<div class="headerSearch">
<div class="entireSearchContainer" id="entireSearchContainer">
<form id="searchForm" name="test" action="https://example.com/" method="GET">
<div class="searchBar" id="searchBar">
<div class="searchBarInner">
<input class="searchBox" id="searchBox">
<button class="deleteSearchBarContentsButton" id="deleteSearchBarContentsButton" type="button"><img src="https://th.bing.com/th/id/R.f8232e70a6e015e91560068ebde56fb4?rik=LZu9qZIqj6SnLw&riu=http%3a%2f%2fcdn.onlinewebfonts.com%2fsvg%2fimg_376399.png&ehk=mpYEtMisrcWebqodks%2fXno%2fbN9QmLfHuo7tMTVFKGnE%3d&risl=&pid=ImgRaw&r=0"></button>
<button class="searchButton" type="submit" value="Search"><img src="https://th.bing.com/th/id/OIP.-9A-FOvJIk9-zy2b0vofXAHaHX?pid=ImgDet&rs=1"></button>
</div>
</div>
</form>
</div>
</div>
</div>
.entireSearchContainer .searchBar {
display: block;
}
I'm embarrassed this is the solution. Safari didn't like it when the "searchBar" was display: inline-block; even though other browsers it was fine.
I'm working on an accordion. I've used jQuery for the animation. When I click on the accordion head the border that holds the + reduces in size. I only want the plus sign to change and the border to stay the same size.
$(document).ready(function() {
//toggle the component with class accordion_body
$(".accordion_head").click(function() {
$(this).removeClass('coll-back');
if ($('.accordion_body').is(':visible')) {
$(".accordion_body").slideUp(400);
$("plusminus").text('+');
$(this).removeClass('coll-back');
$('.rmv-cls').removeClass('coll-back');
}
if ($(this).next(".accordion_body").is(':visible')) {
$(this).next(".accordion_body").slideUp(400);
$(this).children("plusminus").text('+');
$(this).removeClass('coll-back');
} else {
$(this).next(".accordion_body").slideDown(400);
$(this).children("plusminus").text('');
$(this).children("plusminus").append('<hr class="hr-clc">');
$(this).toggleClass('coll-back');
$(this).addClass('rmv-cls');
}
});
});
$('plusminus').on("click", function() {
$(this).toggleClass('active');
$(this).text() == "+" ? $(this).text("-") : $(this).text("+");
});
.plusminus {
vertical-align: middle;
background-color: #139c4b;
color: #fff;
margin-left: 13px;
padding: 15px 25px;
font-size: 36px;
-webkit-font-smoothing: subpixel-antialiased;
}
#plus-1 {
position: relative;
top: 5px;
left: -27%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="start">
<div class="acc-main">
<div class="container">
<div class="kind">
<div class="accordion_container">
<div class="accordion-main">
<div class="accordion_head"><span class="plusminus" id="plus-1">+</span>Because She Matters
</div>
<div class="accordion_body" id="a1" style="display: none;">
<p class="para-acc">
</p>
</div>
</div>
</section>
The font used has its characters with different width, that is the characters + and - have different width. So when they switch, it affects the total width of the block.
You can solve it using a monospaced font, such as Monospace, Courier, Courier New or Lucida Console.
Another solution would be set a fixed width for the block.
First, the <span> must be an block element. You add to it display: inline-block. Then padding will be considered within total width as default, so you have 25px padding for left and right. Your block is about 72px (when +), then you can add width: 22px (50px + 22px = 72px fixed width).
.plusminus {
vertical-align: middle;
background-color: #139c4b;
color: #fff;
margin-left: 13px;
padding: 15px 25px;
font-size: 36px;
-webkit-font-smoothing: subpixel-antialiased;
display: inline-block; /* add this */
width: 22px; /* add this */
}
A little bit the height of the accordion head will change with that, but nothing big.
Add the following css code
.plusminus {
display: inline-flex;
align-items: center;
justify-content: center;
width: 70px;
height: 70px;
line-height: 70px;
box-sizing: border-box;
}
You have already added .active class to .plusmimus class on click of the accordion. I have added some extra CSS code to make it look better as you required.
$(document).ready(function() {
$('.plusminus').on("click", function() {
$(this).toggleClass('active');
});
});
.plusminus {
display: inline-block;
vertical-align: middle;
background-color: #139c4b;
color: #fff;
margin-left: 13px;
padding: 30px;
cursor: pointer;
position: relative;
}
.plusminus::before,
.plusminus::after {
position: absolute;
content: '';
width: 16px;
height: 2px;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
background-color: #FFF;
transition: 0.15s ease-out all;
}
.plusminus::after {
width: 2px;
height: 16px;
}
.plusminus.active::before {
transform: rotate(180deg);
}
.plusminus.active::after {
transform: rotate(90deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="plusminus"></span>
Please let me know if this helps.
I have an html css code for notification dropdown box the issues is i can't able to click the tag and same time i tried with javaScript also not working i can't understand this issues please advice me how to make a clickable tag..
$('.toparea-right > .setting-area > li').on("click",function(){
$(this).siblings().children('div').removeClass('active');
$(this).children('div').addClass('active');
return false;
});
//------- remove class active on body
$("body *").not('.toparea-right > .setting-area > li').on("click", function() {
$(".toparea-right > .setting-area > li > div").removeClass('active');
return true;
});
.dropdowns {
background: #FFF none repeat scroll 0 0;
border: 1px solid #e1e8ed;
list-style: outside none none;
max-height: 294px;
overflow: auto;
padding-left: 0;
position: absolute;
right: -175px;
text-align: left;
top: 55px;
width: 440px;
opacity: 0;
visibility: hidden;
-webkit-transition: all 0.3s linear 0s;
-moz-transition: all 0.3s linear 0s;
transition: all 0.3s linear 0s;
}
.dropdowns.active{
opacity: 1;
visibility: visible;
}
.drops-menu {
list-style: outside none none;
padding-left: 0;
}
.drops-menu > li > a {
border-bottom: 1px solid #e1e8ed;
display: inline-block;
padding: 5px;
width: 100%;
}
.dropdowns > h6{
font-size: 15px;
}
.drops-menu > li > .tag {
color: #fff;
display: inline-block;
font-size: 11px;
padding: 0 6px;
position: absolute;
right: 0;
top: 0;
}
.drops-menu > li:nth-child(2n) > a {
background: whitesmoke none repeat scroll 0 0;
}
.drops-menu > li a img {
display: inline-block;
vertical-align: middle;
width: 10%;
border-radius: 100%;
margin-bottom: 10px;
margin-left: 10px;
height: 45px;
}
.mesg-meta {
display: inline-block;
padding-left: 30px;
vertical-align: middle;
width: -1%;
color: #000000;
padding-top: -21px;
top: 18px;
margin-top: 0px;
line-height: 25px;
}
.mesg-meta > h6 {
font-size: 13.5px;
font-weight: 600;
letter-spacing: 0.3px;
margin-bottom: 0;
text-transform: capitalize;
margin-left: -15px;
}
.mesg-meta > span {
color: #000000;
display: inline-block;
font-size: 12px;
line-height: 15px;
overflow-x: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 100%;
}
.mesg-meta > i {
color: #000000;
font-size: 12px;
font-style: normal;
margin-left: -15px;
}
.drops-menu > li > a:hover {
background: #fafafa none repeat scroll 0 0;
}
.dropdowns > span {
border-bottom: 1px solid #ccc;
display: inline-block;
font-size: 14px;
padding: 0px 10px;
text-align: center;
width: 100%;
height: 59px;
margin-top: 0px;
}
.dropdowns > a.more-mesg {
display: inline-block;
font-size: 14px;
padding-bottom: 5px;
text-align: center;
text-transform: capitalize;
width: 100%;
}
.blue{background: #337ab7;}
.red{background: #ff0000;}
.green{background: #33b7a0;}
.dropdowns.active > a {
background: #fafafa none repeat scroll 0 0;
display: block;
font-size: 13px;
margin-bottom: 2px;
padding: 0px 0px;
text-align: center;
}
.dropdowns.active > a i {
font-size: 11px;
left: 8px;
position: absolute;
top: 10px;
}
.dropdowns.languages {
width: 100px;
}
.dropdowns.active > a:hover {
background: #f1f1f1 none repeat scroll 0 0;
}
<div class="toparea-right">
<ul class="setting-area">
<li>
<i class="far fa-newspaper"></i>
<span class="notifi-count" id="displayNotiCount">00</span>
Notifications
<div class="dropdowns">
<ul class="drops-menu">
<li>
<a href="view-post.php" onclick="window.location.href('view-post.php')" title="">
<div class="mesg-meta-notification">
<h6>Bruce Wayne</h6>
<span>is commented in your post!</span>
<i>0 min ago</i>
</div>
</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
I attached my CSS and HTML code and i tried it's working but URL is opening in another tab. i need open the url in same tab please tell me the solution how to fix this.
In your code dropdown isn't ever made visible.
I think, you on click of "Notifications" you have to toggle(hide/show) dropdown by toggling(adding and removing) "active" class on Notifications tag.
Once your dropdown becomes visible. clicks should work as you desire.
Sample working code:
Notifications
<script>
function toggleDropdownVisibility(event) {
var notificationBell = event.target;
if (notificationBell.classList.contains('active')) {
notificationBell.classList.remove('active');
} else {
notificationBell.classList.add('active');
}
}
</script>
In addition to that please remove onclick="window.location.href('view-post.php')" as window.location.href is not a function instead it a property to which a url can be assigned. like window.location.href='view-post.php' . But you can completely remove this onclick as its not needed.
Your code looks fine here , except that I don't understand why you have opacity:0 and visibility:hidden on the .dropdown css class. These are making your control not accessible.
But once I remove these 2 properties in css worked for me (on last version of Chrome)
My advice:
For tags you can use this :
https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/. No need too much custom JS.
I have the solution for this, i tried that and it's working.
<div class="toparea-right">
<ul class="setting-area">
<li>
<i class="far fa-newspaper"></i>
<span class="notifi-count" id="displayNotiCount">00</span>
Notifications
<div class="dropdowns" id="MmailNoti">
<ul class="drops-menu">
<li>
<a href="view-post.php" onclick="window.location.href('view-post.php')" title="">
<div class="mesg-meta-notification">
<h6>Bruce Wayne</h6>
<span>is commented in your post!</span>
<i>0 min ago</i>
</div>
</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
<script>
// When the user clicks on div, open the popup
function myFunction() {
var popup = document.getElementById("MmailNoti");
popup.classList.toggle("show");
}
</script>
I'm attempting to make a side nav on my site which adds the "active" class to it's four buttons but I cannot seem to make it work properly.
I've successfully added waypoints to the code but they always seem to be a little off and it takes a bit of extra scrolling from the user to activate the waypoint. I've also tried to follow the {offset} rules in the documentation but to no veil. They either stop working properly from last to first or they stop doing so from first to last.
In order to make the sidenav work, I've split the page in columns, as shown in the CSS below. Feel free to provide insight on the code, as this is a learning exercise and I KNOW my code is pretty dirty at the moment (particularly Javascript)
The side nav:
<div class="sidebar verticalized" id="sidebar-verticalized">
<ul id="sidenav" class="side nav-fixed hide-on-med-and-down">
<li class="side-link">
<a class="side-link-first link1" onclick="clickOne()" href="#">01</a>
</li>
<li class="side-link">
02
</li>
<li class="side-link">
03
</li>
<li class="side-link">
04
</li>
</ul>
</div>
The CSS:
html {
overflow: scroll;
overflow-x: hidden;
}
::-webkit-scrollbar {
width: 0px; /* remove scrollbar space */
background: transparent; /* optional: just make scrollbar invisible */
}
.page{
display: grid;
grid-template-columns: 300px auto;
}
.sidebar{
position:fixed;
width:300px;
}
.main{
grid-column-start:2;
}
.verticalized {
margin: 0px;
padding:0px;
float: left;
top: 50%;
transform: translateY(-50%) translateX(-50%);
left:9%;
}
my mess of JS (each section is declared below):
var $section1 = $('.header');
var $section2 = $('.portfolio');
var $section3 = $('.what-we-do');
var $section4 = $('.contact');
var $link1 = $('.link1');
var $link2 = $('.link2');
var $link3 = $('.link3');
var $link4 = $('.link4');
$section1.waypoint(function (){
$link1.addClass('active');
$link2.removeClass('active');
$link3.removeClass('active');
$link4.removeClass('active');
});
$section2.waypoint(function(){
$link1.removeClass('active');
$link2.addClass('active');
$link3.removeClass('active');
$link4.removeClass('active');
});
$section3.waypoint(function(){
$link1.removeClass('active');
$link2.removeClass('active');
$link3.addClass('active');
$link4.removeClass('active');
});
$section4.waypoint(function(){
$link1.removeClass('active');
$link2.removeClass('active');
$link3.removeClass('active');
$link4.addClass('active');
});
What I've tried so far:
Offset: bottom-in-view (sections are sometimes too large and therefore the old active element remains)
Offset: +/- x% (This fixes the issue from one end but not the other one: I could be going from 1 to 4 on links and it works, but 4 to 1 is broken and vice versa)
Any and all advice/tips are welcome. I'm trying to imitate the bootstrap navbar behaviour with active items for each section.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
#import url('https://fonts.googleapis.com/css?family=Varela+Round');
html, body {
overflow-x: hidden;
height: 100%;
}
body {
background: #fff;
padding: 0;
margin: 0;
font-family: 'Varela Round', sans-serif;
}
.header {
display: block;
margin: 0 auto;
width: 100%;
max-width: 100%;
box-shadow: none;
background-color: #FC466B;
position: fixed;
height: 60px!important;
overflow: hidden;
z-index: 10;
}
.main {
margin: 0 auto;
display: block;
height: 100%;
margin-top: 60px;
}
.mainInner{
display: table;
height: 100%;
width: 100%;
text-align: center;
}
.mainInner div{
display:table-cell;
vertical-align: middle;
font-size: 3em;
font-weight: bold;
letter-spacing: 1.25px;
}
#sidebarMenu {
height: 100%;
position: fixed;
left: 0;
width: 250px;
margin-top: 60px;
transform: translateX(-250px);
transition: transform 250ms ease-in-out;
background:#414956;
}
.sidebarMenuInner{
margin:0;
padding:0;
border-top: 1px solid rgba(255, 255, 255, 0.10);
}
.sidebarMenuInner li{
list-style: none;
color: #fff;
text-transform: uppercase;
font-weight: bold;
padding: 20px;
cursor: pointer;
border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
.sidebarMenuInner li span{
display: block;
font-size: 14px;
color: rgba(255, 255, 255, 0.50);
}
.sidebarMenuInner li a{
color: #fff;
text-transform: uppercase;
font-weight: bold;
cursor: pointer;
text-decoration: none;
}
input[type="checkbox"]:checked ~ #sidebarMenu {
transform: translateX(0);
}
input[type=checkbox] {
transition: all 0.3s;
box-sizing: border-box;
display: none;
}
.sidebarIconToggle {
transition: all 0.3s;
box-sizing: border-box;
cursor: pointer;
position: absolute;
z-index: 99;
height: 100%;
width: 100%;
top: 22px;
left: 15px;
height: 22px;
width: 22px;
}
.spinner {
transition: all 0.3s;
box-sizing: border-box;
position: absolute;
height: 3px;
width: 100%;
background-color: #fff;
}
.horizontal {
transition: all 0.3s;
box-sizing: border-box;
position: relative;
float: left;
margin-top: 3px;
}
.diagonal.part-1 {
position: relative;
transition: all 0.3s;
box-sizing: border-box;
float: left;
}
.diagonal.part-2 {
transition: all 0.3s;
box-sizing: border-box;
position: relative;
float: left;
margin-top: 3px;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .horizontal {
transition: all 0.3s;
box-sizing: border-box;
opacity: 0;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-1 {
transition: all 0.3s;
box-sizing: border-box;
transform: rotate(135deg);
margin-top: 8px;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-2 {
transition: all 0.3s;
box-sizing: border-box;
transform: rotate(-135deg);
margin-top: -9px;
}
</style>
<body>
<div class="header"></div>
<input type="checkbox" class="openSidebarMenu" id="openSidebarMenu">
<label for="openSidebarMenu" class="sidebarIconToggle">
<div class="spinner diagonal part-1"></div>
<div class="spinner horizontal"></div>
<div class="spinner diagonal part-2"></div>
</label>
<div id="sidebarMenu">
<ul class="sidebarMenuInner">
<li>Jelena Jovanovic</li>
<li>Company</li>
<li>Instagram</li>
<li>Twitter</li>
<li>YouTube</li>
<li>Linkedin</li>
</ul>
</div>
<div id='center' class="main center">
<div class="mainInner">
<div>PURE CSS SIDEBAR TOGGLE MENU</div>
</div>
<div class="mainInner">
<div>PURE CSS SIDEBAR TOGGLE MENU</div>
</div>
<div class="mainInner">
<div>PURE CSS SIDEBAR TOGGLE MENU</div>
</div>
</div>
</body>`enter code here`
autocomplete working fine but i need a transition effect(slide down) in suggested menu,
I referred from this sites http://tutsforweb.blogspot.in/2012/05/auto-complete-text-box-with-php-jquery.html
and i tried
$(document).ready(function() {
$("#tag").autocomplete("autocomplete.php", {
selectFirst: true
});
});
.ac_results {
background-color: white;
border: 1px solid #5c5c5c;
left: 174.5px !important;
overflow: hidden;
padding: 0;
width: 247px !important;
z-index: 99999;
}
.ac_results ul {
width: 100%;
list-style-position: outside;
list-style: none;
padding: 0;
margin: 0;
}
.ac_results li {
margin: 0px;
padding: 2px 5px;
cursor: default;
display: block;
font-family: "armataregular";
font-size: 12px;
line-height: 16px;
overflow: hidden;
}
.ac_loading {
background: white url('indicator.gif') right center no-repeat;
}
.ac_odd {
background-color: #eee;
}
.ac_over {
background-color: #ccc;
color: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="listone">
<input type="text" placeholder="Enter Keyword" id="tag">
</div>
I added transition property on id="tag" and .ac_results its not working,
please suggest any idea.,
Transitions work by listening to a property and will "animate" when that property changes. So in your case you would need to add a transition to #ac_results. Set the #ac_results height to 0, and when it finds results change the height that element and it should slide down
transition: height 0.5s ease-in-out;
height: 0;
Here is a quick example of it (note that it doesn't do any auto complete, just it shows when input is detected)
http://jsfiddle.net/schwqa7k/1/