This question already has answers here:
how to hide <li> bullets in navigation menu and footer links BUT show them for listing items
(7 answers)
Closed 7 years ago.
This is what my website looks like in Firefox (notice the dots).
This is how it looks in Chrome (No Dots).
Is there a way that I can get the dots to go away?
Here is my code:
function changeText(button) {
button.innerHTML = 'Get Started';
}
.bcafrees {
text-align: center;
font-family:'Roboto', sans-serif;
color: #FFFFFF;
text-align: center;
font-size: 60px;
margin-bottom: 1%;
text-shadow: 1px 1px #000000;
}
nav.header {
margin: 0;
background-color: #66C2FF;
}
nav ul {
width: 100%;
margin: 0;
padding: 0;
height: 4%
}
nav ul li {
width: 4%;
float: left;
margin: 0% 1% 2% 2%;
vertical-align: middle;
text-align: center;
align-items: center;
height: 10px;
margin-top: 0%;
padding-top: 0%;
}
nav ul li a {
display: block;
width: 100%;
text-align: center;
color: #FFFFFF;
text-decoration: none;
font-family: 'Lato', sans-serif;
font-size: 22px;
vertical-align: middle;
}
nav ul li a:hover {
color: #859999;
}
body {
background-color: #3A75B0;
width: 100%;
max-width: 1000000px;
margin: 0 auto !important;
}
body p {
color: #FFFFFF;
text-align: center;
font-family: 'Raleway', sans-serif;
font-size:50px;
padding-top: 10px;
padding-bottom: 5px;
margin: 0;
border: 0;
}
.getStarted {
display: table;
margin: 0 auto !important;
height: 170px;
width: 300px;
background: transparent;
text-decoration: none;
border-style: solid;
border-color: #FFFFFF;
font-family: Helvetica;
text-align: center;
color: #FFFFFF;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
font-size: 60px;
padding: 20px 10px 50px 10px;
margin-bottom: 50px;
font-family: 'Raleway', sans-serif;
}
.getStarted a {
text-decoration: none;
font-family: 'Raleway', sans-serif;
text-align: center;
color: #FFFFFF;
font-size: 60px;
margin-bottom: 50px;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
footer {
clear: both
color: #FFFFFF;
font-family: TW Cen MT;
padding-top: 5.06%;
position: relative;
}
footer ul {
width: 100%;
list-style: none;
margin-left: auto;
margin-right: auto;
padding: 0;
overflow: hidden;
text-align: center;
display: block;
color: #FFFFFF;
text-decoration: none;
font-family: TW Cen MT;
}
footer div {
background-color: #66C2FF;
height: 100px;
text-decoration: none;
}
.timmy:hover {
color: #3A75B0;
}
.katie:hover {
color: #3A75B0;
}
.katie {
display: table;
margin-left: auto;
margin-right: auto;
width: 70px;
}
.timmy {
display: table;
margin-left: auto;
margin-right: auto;
width: 95px;
}
footer div ul a{
width: 100px;
}
hr {
margin-top: 10px;
color: #FFFFFF;
width: 70%;
}
.getStartedButton:hover {
color: #3A75B0;
background-color: #FFFFFF;
}
.getStartedButton {
width: 300px;
margin-left: auto;
margin-right: auto;
border-radius: 10px;
}
.getStartedButton a:hover {
color: #3A75B0;
}
.getStarted:hover {
color: #3A75B0;
}
.getStartedButton.getStarted:hover {
color: #3A75B0;
}
<html lang="en">
<head>
<meta charset="utf-8">
<link type="text/css" rel="stylesheet" href="welcome.css"/>
<link href='http://fonts.googleapis.com/css?family=Raleway:100' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Roboto:100' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lato:300' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="Welcome.js"></script>
<title>BCA Frees</title>
</head>
<body>
<header>
<div class="bcafrees">
BCA Frees
</div>
<nav class="header">
<ul>
<li></li>
<li></li>
<li class="home">Home</li>
<li></li>
<li></li>
<li class="about">About</li>
<li></li>
<li></li>
<li class="faqs">FAQs</li>
<li></li>
<li></li>
<li class="credits">Credits</li>
<li></li>
<li></li>
</ul>
</nav>
</header>
<div id="wrapper">
<div class="p">
<p>Find Your Friends</p>
<p>During Your Frees</p>
<hr />
<br />
</div>
<div class="getStartedButton">
<a href ="/signup">
<button onmouseover="changeText(this)" class="getStarted">
Get Started
</button>
</a>
</div>
</div>
<footer>
<div id="footer">
<ul>
<li>Copyright BCA Frees 2014</li>
<hr class="hr" />
<li>Created By:</li>
<li class="timmy">Timothy Obiso</li>
<li class="katie">Katie Katz</li>
</ul>
</div>
</footer>
</body>
</html>
Add a list-style: none; in the nav ul li selector:
nav ul li {
list-style: none;
width: 4%;
float: left;
margin: 0% 1% 2% 2%;
vertical-align: middle;
text-align: center;
align-items: center;
height: 10px;
margin-top: 0%;
padding-top: 0%;
}
To remove the bullets, or numbers, from a list you can use list-style: none;. It's also worth noting that you may want to remove the default padding that's automatically created for the list.
HTML
<ul>
<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
</ul>
<ol>
<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
</ol>
CSS
ol, ul {
list-style: none;
padding: 0; /* Optional to remove default padding */
}
An example can be seen on jsFiddle: http://jsfiddle.net/jamesjefferyUK/p26afsp1/1/
Related
I want to create a menu that appears when the hamburger button is clicked. I tried to do it myself but I got frustrated because everything I tried wasn't working. I want to do it with jQuery
Here is how it looks like now:
Here's the HTML:
<div class="intro">
<div class="container">
<!-- Navigation -->
<div class="menu">
<ul class="navigation">
<li>HOME</li>
<li>CONTACT</li>
<li>BLOG</li>
<li>MY WORK</li>
</ul>
</div>
<div class="toggle-nav">☰</div>
<!-- Intro Section -->
<h1>Nelson Lupanda</h1>
<h3>Front End Developer</h3>
</div>
</div>
And Here's the CSS
html, body {
width: 100%;
height: 100%;
margin: 0px;
font-weight: lighter;
}
#media only screen and (min-width: 380px) and (max-width: 500px) and
(orientation:portrait), (max-width:480px) and (orientation:landscape) {
html {
font-size: 16px;
}
* {
box-sizing:border-box;
moz-box-sizing:border-box;
webkit-box-sizing:border-box;
}
hr {
size:1;
width: 15%;
}
/* intro section */
.intro {
background-color: #f2f2f2;
height: auto;
width: 100%;
font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
}
.intro .container {
height: 100%;
padding: 20px 15px 50px 15px;
}
.intro .menu {
text-align: center;
display: none;
}
.intro .menu ul {
background-color: #f2f2f2;
}
.intro .menu li {
display: block;
list-style: none;
margin-top: 10px;
}
.intro .menu li a {
text-decoration: none;
color: #000000;
}
.intro .toggle-nav {
float: right;
clear: right;
margin-right: 20px;
font-size: 1.5rem;
cursor: pointer;
}
.intro h1 {
margin: 60px 0 0 0;
}
.intro h3 {
margin-bottom: 30px;
}
.intro h1, .intro h3 {
font-weight: bolder;
text-align: center;
}
}
this is just a simple example to get you started, just put a div above everything (you might have to use z-index) and toggle hide and show that overlay when something is clicked.
$(document).ready(function() {
$('.menu').on('click', function() {
$('.overlay').show();
});
$('.close').on('click', function() {
$('.overlay').hide();
})
})
.content {
width: 100%;
height: 20000px;
background-color: yellow;
}
.menu {
margin-left: 1rem;
margin-top: 1rem;
}
.overlay {
background-color: rgba(0,0,0,.8);
position: fixed;
top:0;
left:0;
right:0;
bottom:0;
display:none;
}
.close {
margin-left: 1rem;
margin-top: 1rem;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
<div class="overlay">
<button class="close">close</button>
</div>
<button class="menu">menu</button>
</div>
I have got the solution for you.
OR
JS:
$(function(){
$(".toggle-nav").click(function(){
$(".menu").toggleClass("open");
});
});
HTML:
<div class="intro">
<div class="container">
<!-- Navigation -->
<div class="toggle-nav">☰</div>
<div class="menu">
<ul class="navigation">
<li>HOME</li>
<li>CONTACT</li>
<li>BLOG</li>
<li>MY WORK</li>
</ul>
</div>
<!-- Intro Section -->
<h1>Nelson Lupanda</h1>
<h3>Front End Developer</h3>
</div>
</div>
CSS:
html, body {
width: 100%;
height: 100%;
margin: 0px;
font-weight: lighter;
}
#media only screen and (min-width: 380px) and (max-width: 500px) and (orientation:portrait), (max-width:480px) and (orientation:landscape) {
html {
font-size: 16px;
}
* {
box-sizing:border-box;
moz-box-sizing:border-box;
webkit-box-sizing:border-box;
}
hr {
size:1;
width: 15%;
}
/* Style for the menu */
/* intro section */
.intro {
background-color: #f2f2f2;
height: auto;
width: 100%;
font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
}
.intro .container {
height: 100%;
padding: 20px 15px 50px 15px;
}
.intro .menu {
text-align: center;
display: none;
}
.intro .menu ul {
background-color: #f2f2f2;
}
.intro .menu li {
display: block;
list-style: none;
margin-top: 10px;
}
.intro .menu li a {
text-decoration: none;
color: #000000;
}
.intro .toggle-nav {
float: right;
clear: right;
margin-right: 20px;
font-size: 1.5rem;
cursor: pointer;
display: block;
width: 100%;
}
.intro h1 {
margin: 60px 0 0 0;
}
.intro h3 {
margin-bottom: 30px;
}
.intro h1, .intro h3 {
font-weight: bolder;
text-align: center;
}
.container > .toggle-nav {
text-align: right;
}
.menu.open {
display: block;
}
}
--
I created a mobile menu and for some reason whenever you expand the menu, the list items shift the right a bit and the border-bottom does not cover the entire width of the expanded menu.
To see the mobile part of the menu, shrink the screen down some. Once you click the menu icon, you will see that the list doesn't just go straight down, it looks to move to the right. Then the border issue is very easy to see.
See snippet to view the issue.
$('span.nav-btn').click(function () {
$('ul.nav_list').slideToggle(500);
})
$(window).resize(function (){
if ( $(window).width() > 600 ) {
$('ul.nav_list').removeAttr('style');
}
});
body {
padding: 0;
margin: 0;
font-family:
}
.header {
margin: 0;
background-color: #333;
height: 80px;
}
.header_wrap {
margin: 0 15%;
}
.logo {
color: #FFF;
font-size: 1.2em;
padding-top: 25px;
position: absolute;
}
.nav_list {
text-decoration: none;
background-color: #333;
color: #FFF;
margin: 0;
list-style: none;
text-align: right;
}
.nav_list > li {
display: inline-block;
padding: 25px 15px;
}
.nav_list > li > a {
text-decoration: none;
font-size: 1.2em;
color: #FFF;
}
#media screen and (max-width:640px) {
body {
background-color: blue;
}
.header_wrap {
margin: 0 5%;
}
.nav_list {
text-align: center;
display: none;
margin-top: 60px;
}
.nav_list > li {
display: block;
border-bottom: 1px solid #FFF;
}
.nav-btn {
display: block;
background-color: #333;
color: #FFF;
font-size: 1.5em;
text-align: right;
cursor: pointer;
padding-top: 20px;
}
.nav-btn:before {
background-image: url('http://realtorcatch.com/icons/mobile_menu_bttn.png');
background-size: 28px 28px;
background-repeat: no-repeat;
width: 28px;
height: 28px;
content:"";
display: block;
float: right;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
<header class="header">
<div class="header_wrap">
<div class="logo">Garbrandt Construction</div>
<nav>
<span class="nav-btn"></span>
<ul class="nav_list">
<li>Services</li>
<li>About us</li>
<li>Pricing</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
</body>
Try adding the last line to your nav_list (padding-left:0 is needed):
.nav_list {
text-align: center;
display: none;
margin-top: 60px;
padding-left:0;
}
JS Fiddle
You should add a padding of 0 to the ul element. Padding: 0 or padding-left: 0 should do it.
.nav_list {
padding: 0;
}
Lists automatically have padding to the left;
I'm trying to create dropdown menu that will open and collapse when the "mobile-nav" button gets clicked.
Please see this video or website as examples of the intended behavior:
https://www.youtube.com/watch?v=ozOSV75DgzU
http://travisneilson.com/
function mobileNav() {
$('.mobile-nav-toggle').on('click', function() {
var status = $(this).hasClass('is-open');
if (status) {
$('.mobile-nav-toggle, .mobile-nav').removeClass('is-open');
} else {
$('.mobile-nav-toggle, .mobile-nav').addClass('is-open');
}
});
}
/* ------------------------------------------ */
/* BASIC SETUP */
/* ------------------------------------------ */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
text-align: justify color: #fff;
font-family: 'Lato', 'arial', sans-serif;
font-size: 19px;
font-weight: 400;
text-rendering: optimizeLegibility;
background: #333;
background-position: center;
height: 100vh;
background-attachment: fixed;
}
/* ------------------------------------------ */
/* REUSABLE COMPONENTS */
/* ------------------------------------------ */
.row-basic {
max-width: 1216px;
}
.main-container {
max-width: 1216px;
margin: 0 auto;
}
/* ------------------------------------------ */
/* HEADER */
/* ------------------------------------------ */
.mobile-nav {
display: ;
position: ;
width: 1216px;
background: white;
padding: 31px 0px 21px;
transform: translateY(-100%);
transition: all 0.3s ease-in-out
}
.mobile-nav.is-open {
display: block;
transform: translateY(0%);
}
.mobile-nav ul {
list-style: none;
}
.mobile-nav ul li {
text-align: center;
margin-bottom: 10px;
}
.mobile-nav ul li a:link,
.mobile-nav ul li a:visited {
color: #999;
text-decoration: none;
text-transform: uppercase;
}
header {
background-color: rgba(246, 149, 149, 0.06);
height: 81px;
width: auto;
padding-top: 24px;
margin-top: 26px;
margin-bottom: 0px;
display: flex;
justify-content: space-between;
}
/* ----- NAVIGATION -----*/
nav {
display: flex;
align-items: center;
}
nav ul {
display: flex;
}
.main-nav {
list-style: none;
}
.main-nav li {
display: inline-block;
line-height: 31px;
border-right: 1px solid rgba(255, 255, 255, 0.24);
padding-right: 9px;
padding-left: 9px;
margin-right: 0px;
width: auto;
}
.main-nav li:last-child {
border-right: hidden;
margin-right: 31px;
}
.main-nav li a:link,
.main-nav li a:visited {
color: #fff;
text-decoration: none;
text-transform: uppercase;
}
.user-tools {
display: flex;
align-items: center;
}
.user-tools:focus {
outline: none;
}
/* ----- MENU BUTTON -----*/
.mobile-nav-toggle {
height: 50px;
width: 35px;
margin-right: 31px;
display: flex;
align-items: center;
cursor: pointer;
}
.mobile-nav-toggle span,
.mobile-nav-toggle span::before,
.mobile-nav-toggle span::after {
border-radius: 2px;
content: "";
display: block;
height: 6px;
width: 100%;
background: #fff;
position: relative;
}
.mobile-nav-toggle span::before {
top: 11px;
}
.mobile-nav-toggle span::after {
bottom: 17px;
}
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="resources/css/style.css">
<link href='https://fonts.googleapis.com/css?family=Lato:400,900' rel='stylesheet' type='text/css'>
<script src="resources/js/functions.js"></script>
</head>
<body>
<div class="main-container">
<div class="mobile-nav is-open">
<ul>
<li>Menu
</li>
<li>Services
</li>
<li>Gallery
</li>
<li>About Me
</li>
</ul>
</div>
<header class="row-basic">
<nav>
<ul class="main-nav">
<li>Menu
</li>
<li>Services
</li>
<li>Gallery
</li>
<li>About Me
</li>
</ul>
</nav>
<div class="user-tools">
<div class="mobile-nav-toggle">
<span></span>
</div>
</div>
</header>
</div>
</body>
</html>
You have to add link to jQuery script.
Delete declaration function mobileNav() { and it closing braket }.
$('.mobile-nav-toggle').on('click', function() {
var status = $(this).hasClass('is-open');
if (status) {
$('.mobile-nav-toggle, .mobile-nav').removeClass('is-open');
} else {
$('.mobile-nav-toggle, .mobile-nav').addClass('is-open');
}
});
Here is example of working code https://jsfiddle.net/efjz40ob/
I am trying to build a mobile friendly navigation for my website and I want to use a menu that slides down after pressing the menu link. I thought it would be pretty simple but it isn't working. When I click the link "Menu" nothing happens. It should reveal a menu using the .slideToggle feature of jQuery. If you could offer a fix or an alternative method to making a responsive and mobile friendly menu.
<script>
$(document).ready(function(){
$("#burger").click(function(){
$("#menu").slideToggle();
});
});
</script>
<!-- END OF SCRIPTS -->
<!-- HEADER -->
<header>
<div id="top">
<img src="root/logo.png">
<div id="burger">
<a>Menu</a>
</div>
</div>
<nav id="navbar">
<ul id="menu">
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
<li>Option 4</li>
<li>Option 5</li>
</ul>
</nav>
</header>
<!-- END HEADER -->
</body>
</head>
This is my CSS:
/* HEADER */
header {
width: 100%;
background-color: #012d5a;
height: 150px;
}
#top {
width: 80%;
margin-left: auto;
margin-right: auto;
}
#top img{
height: 110px;
margin-left: 0px;
}
#navbar {
width: 100%;
height: 40px;
background-color: #B9E0F6;
display: block;
color: #000;
font-family: helvetica;
font-size: 16px;
font-weight: 600;
}
#menu {
display: block;
width: 600px;
margin: auto;
height: 40px;
}
#menu li {
float: left;
width: 120px;
display: inline;
padding-top: 10px;
height: 40px;
border-right: 2px solid #000;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
text-align: center;
}
#menu li:last-child {
border-right: 0;
}
#burger {
display: none;
float: right;
}
/* Responsive Menu */
#media only screen and (max-device-width: 767px) {
/* define mobile specific styles here */
#burger {
display: block;
}
#navbar {
height: auto;
position: relative;
z-index: 1;
}
#menu {
display: none;
height: 200px;
width: 100%;
}
#menu li {
display: block;
float: none;
width: 50%;
border: none;
margin: auto;
}
#top {
width: 100%;
}
}
Your menu is hidden in the CSS, try this instead:
$("#burger").click(function(){
$("#navbar").slideToggle();
});
/* HEADER */
header {
width: 100%;
background-color: #012d5a;
height: 150px;
}
#top {
width: 80%;
margin-left: auto;
margin-right: auto;
}
#top img{
height: 110px;
margin-left: 0px;
}
#navbar {
width: 100%;
height: 40px;
background-color: #B9E0F6;
display: block;
color: #000;
font-family: helvetica;
font-size: 16px;
font-weight: 600;
}
#menu {
display: block;
width: 600px;
margin: auto;
height: 40px;
}
#menu li {
float: left;
width: 120px;
display: inline;
padding-top: 10px;
height: 40px;
border-right: 2px solid #000;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
text-align: center;
}
#menu li:last-child {
border-right: 0;
}
#burger {
float: right;
color: #B9E0F6;
margin-top: 24px;
font-size: 24px;
cursor: pointer;
text-decoration: underline;
}
/* Responsive Menu */
#media only screen and (max-device-width: 767px) {
/* define mobile specific styles here */
#burger {
display: inline-block;
}
#navbar {
height: auto;
position: relative;
z-index: 1;
}
#menu {
display: none;
height: 200px;
width: 100%;
}
#menu li {
display: block;
float: none;
width: 50%;
border: none;
margin: auto;
}
#top {
width: 100%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<!-- Scripts Here -->
<script type = "text/javascript" src="script/jquery-2.1.4.min.js"></script>
<script type = "text/javascript" src="script/bootstrap.min.js"></script>
<!-- END OF SCRIPTS -->
<!-- HEADER -->
<header>
<div id="top">
<div style="display:inline-block">
<img src="http://doc.jsfiddle.net/_images/jsfiddle-logo-thumb.png" />
</div>
<div id="burger">
<a>Menu</a>
</div>
</div>
<nav id="navbar">
<ul id="menu">
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
<li>Option 4</li>
<li>Option 5</li>
</ul>
</nav>
</header>
<!-- END HEADER -->
I want to make header that resizes itself based on the size of the users screen. So far i have an image on the left and a menu on the right. i want the menu's margin from the right to get smaller until a point where the image begins to get smaller and then if it gets even smaller the menu goes bellow the image.
Here is the HTML code:
<body>
<script type="text/javascript" src="script.js"></script>
<script src="jquery1.js"></script>
<div id="wrapper">
<!-- Header -->
<div id="header">
<!-- Logo -->
<div id="header_logo"></div>
<!-- Navigation Bar -->
<ul class="navbar">
<li>Home
<li>#
<li>#
<li>#
<li>#
</ul>
</div>
Here is the CSS code:
#wrapper {
width: 80%;
margin-left: auto;
margin-right: auto;
}
#header {
float: left;
width: 100%;
height: 250px;
border: none;
}
#header_logo {
background: url("images/logo.png")no-repeat;
float: left;
width: 300px;
height: 135px;
margin: 50px 0px 0px 50px;
}
.navbar {
float: right;
margin-top: 125px;
margin-right: 100px;
width: 600px;
}
.navbar li {
float: left;
list-style-type: none;
}
.navbar li a {
padding: 6px 20px;
text-decoration: none;
border-right: 1px solid #0040FF;
color: #0040FF;
font-size: 15px;
font-family: 'Open Sans', sans-serif;
font-weight: bold;
}
.navbar li a:hover{
color: #000000;
background-color:#0040FF;
}
Thank you i would be grateful for any help.
Then I would suggest to either keep the horizontal things in percentage or use css media queries.
percentage example is here:
HTML:
<div id="wrapper">
<!-- Header -->
<div id="header">
<!-- Logo -->
<img src="images/logo.png" />
<!-- Navigation Bar -->
<ul class="navbar">
<li>Home</li>
<li>#</li>
<li>#</li>
<li>#</li>
<li>#</li>
</ul>
</div>
</div>
CSS:
#wrapper {
width: 80%;
margin-left: auto;
margin-right: auto;
}
#header {
height: 250px;
}
#header_logo {
float: left;
width: 20%;
margin: 50px 0 0 5%;
}
#header_logo img{width:100%;}
.navbar {
float: right;
margin-top: 125px;
margin-right: 5%;
text-align:right;
width: 60%;
}
.navbar li {
display:inline-block;
list-style-type: none;
}
.navbar li a {
display:block;
padding: 6px 20px;
text-decoration: none;
border-right: 1px solid #0040FF;
color: #0040FF;
font:bold 15px 'Open Sans', sans-serif;
}
.navbar li a:hover{
color: #000;
background-color:#0040FF;
}
Jsfiddle: http://jsfiddle.net/ashishanexpert/kvg4F/
Good luck!