cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <ol id="global-menu">
	<li><a href="#">Menu</a></li>
	<li><a href="#">Locations</a></li>
	<li><a href="#">Jobs</a></li>
	<li><a href="#">Kids</a></li>
	<li class="my-sonic"><a href="#">My Sonic</a></li>
</ol>

<nav id="menu-categories">
	<ol>
		<li>
			<span class="food-category-name">All</span>
			<img src="https://www.sonicdrivein.com/static/img/common/combo.png">
		</li>
		<li class="active">
			<span class="food-category-name">Burgers</span>
			<img src="https://lh3.googleusercontent.com/iXpM7AyZ6xcHp1rQ9RRUBve5TItpFxqSKYVJjRfaRRnBTEfToAnhltrKNSRemg1SO8yL55e10_NsknLk1IKq=s113" />
		</li>
		<li>
			<span class="food-category-name">Hot Dogs</span>
			<img src="https://lh5.ggpht.com/-_oqTokXPzwLcr5EXojx_w2nAOcvBtzofs496mBryXcXNQB497rjJX21uWT0nN87TQb5Fo48wNBLDYAtWk_Y=s113" />
		</li>
		<li>
			<span class="food-category-name">Breakfast</span>
			<img src="https://lh3.googleusercontent.com/PGn7fZ8PZuvN60nLNmXmTTx_WWRVUhW825NnfpgYUcg2Ln7NKKbbjb5G4M-53FcowiQEeYhcRJXl_s88dFs=s113" />
		</li>
		<li>
			<span class="food-category-name">Chicken</span>
			<img src="https://lh4.ggpht.com/0fBNgQdLFMT6RgMYAEvFj1cehTV4dYUSbZqY1ct3n6g8LtZsl3KoF9_Rp9dm5WY49iRIcSOt1-46TmghCKM=s113" />
		</li>
		<li>
			<span class="food-category-name">Snacks & Sides</span>
			<img src="https://lh6.ggpht.com/dFWl3zlKe9uP8u0vAS6hb6CNxSBGYwopAgSfTTEzIhQ0QJdXv85r0lStE01kXN4-nrfm-2fhdPt74AoL0YM=s113" />
		</li>
		<li class="drinks">
			<span class="food-category-name">Drinks</span>
			<img src="https://lh4.ggpht.com/_TonK_CrZJ3b2gOheqIlL_llzpLQQCLaD_s-i4Bq6-KgnnYMgXZgD55uc1afR-EUi5SSvqFHVOKMd9jtCnBp=s113" />
		</li>
		<li class="ice-cream">
			<span class="food-category-name">Ice Cream</span>
			<img src="https://lh5.ggpht.com/DyLhzGmaZqyOvBeO2OMCu1iBME3eAH7fQT7eWxdu97M3Cz7qaAmQr-tgBIv8bL1DrEwbsnTrxd8BWlBnGc_U=s113" />
		</li>
		<li>
			<span class="food-category-name">Wacky Pack &reg;</span>
			<img src="https://lh6.ggpht.com/JJ5YqPfDpyOv09KgD3cHA4zZWXz1u1A3KOVucZVguoyxpaBoOddju3u_u9H1ROftKvev7OGL6GfXbP43zpra=s113" />
		</li>
	</ol>
</nav>
<section class="menu-items">
	<h2>Burgers</h2>
<p>Prepare to be delighted with 100% pure beef, melty cheese and fresh ingredients, all made to order.</p>
	<ol class="menu-item-listing">
		<li>
			<span class="menu-item-name">Sonic&reg; Cheeseburger</span>
			<img src="https://lh3.googleusercontent.com/GlXvLkghQncBfhlGBrZ3lQBOwuAK1fk-CEDOhRXRmrd2GneQky6i-I831rC648o8NhSgwcQhI1xo46j-ggXZ-Q=s400" />
		</li>
		<li>
			<span class="menu-item-name"><em>Super</em>Sonic&reg; Double Cheeseburger</span>
			<img src="https://lh3.googleusercontent.com/iXpM7AyZ6xcHp1rQ9RRUBve5TItpFxqSKYVJjRfaRRnBTEfToAnhltrKNSRemg1SO8yL55e10_NsknLk1IKq=s400" />
		</li>
		<li>
			<span class="menu-item-name"><em>Super</em>Sonic&reg; Bacon Double Cheeseburger</span>
			<img src="https://lh3.googleusercontent.com/Ele8gtDOd1tlQ4TebRJkf6XgpciDD2e57Jf5E3UwAzvfPs0kLhOXJLewZYsu1CFn9CPly0TLvrZUCqJnXMn0=s400" />
		</li>
		<li>
			<span class="menu-item-name">Sonic&reg; Bacon Cheeseburger</span>
			<img src="https://lh3.googleusercontent.com/MXGR72JVHpz8XzGHFcsMRIBVYpdJuzaOoPqTz0yOb18ZwvztJyhGZQMtxKVeEXac_6WH5k73fZ39nqmlnNyb=s400" />
		</li>
		<li>
			<span class="menu-item-name">Jr. Burger</span>
			<img src="https://lh3.googleusercontent.com/i-vHb3CryeDkJrTydwmJFJ1M1HrFtjAGIDC5xI7wI7bkOqV_iV0Zpr6jtm-9Lmv6n1pgkMBhJHSb2Ef1XMxLEQ=s400" />
		</li>
		<li>
			<span class="menu-item-name">Jr. Double Cheeseburger</span>
			<img src="https://lh3.googleusercontent.com/rZffPhtsT38VMvV40KZNzgzGpiR8LVeqcRYDVHKYoWoz6vuKj_0X2nTcpUrqfbnVKSpsPOiR6eyos1el_2UB=s400" />
		</li>
		<li>
			<span class="menu-item-name">Jr. Deluxe Cheeseburger</span>
			<img src="https://lh3.googleusercontent.com/zEE3wNRoKGd8py4Jhod6HFaWf6iLjV3wtAjVZR-cC3pB0rRehlhBuKZOag8lL8af4XFAwEuSCl9kebbDpJibDg=s400" />
		</li>
		<li>
			<span class="menu-item-name">Bacon Cheeseburger <em>TOASTER</em>&reg;</span>
			<img src="https://lh3.googleusercontent.com/87M6X6hiETZcuH7ViT87KncCMr7nnSOJH1djalKHDDfEAjUb2yBbSqBtofso_ecls1YClzOFaoAldam9Iskh_A=s400" />
		</li>
	</ol>
</section>
            
          
!
            
              body {
  background: #e7f8ff;
}

ol {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

#global-menu {
  background: white;
  display: flex;
  justify-content: flex-start;
  flex-direction: row;
  padding-left: 20%;
  width: 80%;
}
#global-menu li {
  border-bottom: 3px solid transparent;
  color: #3b4e61;
  font-family: 'Lato', sans-serif;
  font-size: 21px;
  font-weight: 700;
  padding: 15px 10px;
  text-transform: uppercase;
}
#global-menu li:hover {
  border-bottom-color: red;
}
// I am only hiding these in this example because I am not worrying about reproducing the mobile functionality
@media (max-width: 767px) {
  #global-menu li:not(.my-sonic) {
    visibility: hidden;
  }
}
#global-menu li a {
  color: inherit;
  text-decoration: none;
}
#global-menu li:last-child {
  border-bottom: 0;
  margin-left: auto;
}
#global-menu li:last-child a {
  background-color: red;
  border-radius: 4px;
  color: white;
  padding: 6px;
}
#global-menu li:last-child a:hover {
  background-color: #990000;
}

#menu-categories {
  background: white;
  overflow-y: hidden;
  overflow-x: auto;
}
#menu-categories ol {
  display: flex;
  height: 98px;
  min-width: 900px;
  width: 100%;
}
@media (min-width: 768px) {
  #menu-categories ol {
    height: 198px;
    min-width: 1200px;
  }
}
#menu-categories li {
  border: 1px solid #f5f5f5;
  border-left: 0;
  display: flex;
  flex-direction: column-reverse;
  flex: 1;
  padding: 20px 0;
  align-items: center;
}
#menu-categories li:hover, #menu-categories li.active {
  background-image: radial-gradient(ellipse at center, #ffffff 40%, rgba(255, 235, 181, 0.6) 100%);
}
#menu-categories li.drinks:hover, #menu-categories li.drinks.active:hover {
  background-image: radial-gradient(ellipse at center, #ffffff 40%, #d6e5f3 100%);
}
#menu-categories li.ice-cream:hover, #menu-categories li.ice-cream.active:hover {
  background-image: radial-gradient(ellipse at center, #ffffff 40%, #f5efff 100%);
}
#menu-categories .food-category-name {
  color: #3b4e61;
  font-family: 'Lato', sans-serif;
  font-size: 12px;
}
@media (min-width: 768px) {
  #menu-categories .food-category-name {
    font-size: 14px;
    margin-top: 20px;
  }
}
#menu-categories img {
  max-width: 50%;
}
@media (min-width: 768px) {
  #menu-categories img {
    max-width: 100px;
  }
}

.menu-items {
  padding-top: 72px;
  text-align: center;
}
.menu-items h2 {
  color: #3B4E6F;
  font-family: 'Lato', sans-serif;
  font-size: 48px;
  line-height: 52px;
  margin: 0 0 20px;
}
.menu-items p {
  color: #3B4E6F;
  margin: 0 auto;
  max-width: 550px;
  opacity: .6;
}

.menu-item-listing {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  margin: 32px auto 48px;
  width: 90vw;
}
@media (min-width: 1388px) {
  .menu-item-listing {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 200%;
  }
}
.menu-item-listing li {
  background-color: white;
  border: 1px solid #f5f5f5;
  border-left: 0;
  border-top: 0;
  display: flex;
  flex-direction: column-reverse;
  flex: 1;
  padding: 20px 0;
  position: relative;
  align-items: center;
  justify-content: space-around;
}
@media (min-width: 768px) {
  .menu-item-listing li {
    min-height: calc(90vw / 4);
  }
}
.menu-item-listing li:hover {
  background-image: radial-gradient(ellipse at center, #ffffff 40%, rgba(255, 235, 181, 0.6) 100%);
  box-shadow: inset 0 3px 15px rgba(0, 0, 0, 0.08);
}
.menu-item-listing li:hover img {
  transform: translateY(-10px);
}
.menu-item-listing .menu-item-name {
  color: #3b4e61;
  font-family: 'Lato', sans-serif;
  font-size: 16px;
  line-height: 22px;
  margin: 0 10px;
}
.menu-item-listing img {
  max-width: 70%;
  max-height: 230px;
  transition: all .25s ease-in;
}
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console