4
\$\begingroup\$

This may be rather basic, but I wanted to experiment and learn with some of the upcoming CSS3 techniques. I wasn't able to come up with an HTML/CSS only solution, and I had to work longer than I'd like to admit to get to a point where this menu works as intended on desktop or mobile.

The main lesson I learned is forget about using :hover to control actions. It's worthless on mobile, and having the function on click in desktop isn't that bad, and is probably the better practice anyway.

I haven't tested in a lot of env, but more than a few. It seems to work pretty well in modern browsers. Let me know how I can improve!

GitHub

Working demo

//click to open menu
$('.follow button').click(function(){
    $('.addClass').toggleClass("profile-container");
});
/*RESET*/
	/* http://meyerweb.com/eric/tools/css/reset/ 
	   v2.0 | 20110126
	   License: none (public domain)
	*/

	html, body, div, span, applet, object, iframe,
	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
	a, abbr, acronym, address, big, cite, code,
	del, dfn, em, img, ins, kbd, q, s, samp,
	small, strike, strong, sub, sup, tt, var,
	b, u, i, center,
	dl, dt, dd, ol, ul, li,
	fieldset, form, label, legend,
	table, caption, tbody, tfoot, thead, tr, th, td,
	article, aside, canvas, details, embed, 
	figure, figcaption, footer, header, hgroup, 
	menu, nav, output, ruby, section, summary,
	time, mark, audio, video {
		margin: 0;
		padding: 0;
		border: 0;
		vertical-align: baseline;
	}
	/* HTML5 display-role reset for older browsers */
	article, aside, details, figcaption, figure, 
	footer, header, hgroup, menu, nav, section {
		display: block;
	}
	body {
		line-height: 1;
	}
	ol, ul {
		list-style: none;
	}
	blockquote, q {
		quotes: none;
	}
	blockquote:before, blockquote:after,
	q:before, q:after {
		content: '';
		content: none;
	}
	table {
		border-collapse: collapse;
		border-spacing: 0;
	}
	*{
		letter-spacing: normal;
	}
/* END RESET */

/*Disables text selection*/
body{
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;
	display: table;
	height: 100%;
	width: 100%;
	background-image: url(https://i.imgsafe.org/100dde0.png); 
}
/* Text Center class */
.center{
	text-align: center;
}
/*Class that centers img elements in their container*/
img.centerImg{
	display: block;
	margin: 0 auto;
}
/*profileDropdown*/

	/* PROFILE STYLES */
	ul, li {
	    margin: 0;
	    padding: 0;
	    list-style-type: none;
	}

	.container {
	    margin: 0px auto 0;
	    width: 378px;
	}

	.profile-container {
	    position: relative;
	    width: 378px;
	    float: left;
	}

	.profile {
		width: 370px;
	    background: #f6f6f6;
	    float: left;
	    padding: 4px;
	    border-radius: 3px;
	    -o-border-radius: 3px;
	    -ms-border-radius: 3px;
	    -moz-border-radius: 3px;
	    -webkit-border-radius: 3px;
	    -webkit-transition: all 0.2s ease-in-out;
	    -moz-transition: all 0.2s ease-in-out;
	    -ms-transition: all 0.2s ease-in-out;
	    -o-transition: all 0.2s ease-in-out;
	    transition: all 0.2s ease-in-out;
	}

	.avatar img {
	    display: block;
	    border-radius: 5px;
	    -o-border-radius: 5px;
	    -ms-border-radius: 5px;
	    -moz-border-radius: 5px;
	    -webkit-border-radius: 5px;
	}

	#portraitCaption{
		font-style: italic;
		color: #b9b9b9;
		font-size: .75em;
	}

	.follow {
	    margin: 0px 0 0 0;
	}

	.follow button {
	    display: block;
	    width: 100%;
	    border: 0;
	    background: #268cde;
	    color: white;
	    font-weight: bold;
	    font-size: 1.25em;
	    padding: 7px 0;
	    margin: 0;
	    border-radius: 3px;
	    -o-border-radius: 3px;
	    -ms-border-radius: 3px;
	    -moz-border-radius: 3px;
	    -webkit-border-radius: 3px;
	    -webkit-transition: all 0.2s ease-in-out;
	    -moz-transition: all 0.2s ease-in-out;
	    -ms-transition: all 0.2s ease-in-out;
	    -o-transition: all 0.2s ease-in-out;
	    transition: all 0.2s ease-in-out;
	    cursor: pointer;
	}


	.follow button:hover {
	    background: #3096e8;
	}

	.follow button:active {
	    background: #2085d6;
	}

	.profile-list {
	    overflow: hidden;
	    width: 100%;
	    box-sizing: border-box;
	    color: #767b7e;
	    font-size: 13px;
	}

	.profile-list li {
	    cursor: pointer;
	    background: #ffffff;
	    border-top: 1px solid #e5e6e6;
	}

	.profile-list li:last-child {  
	    border-radius: 0 0 3px 3px;;
	    -o-border-radius: 0 0 3px 3px;
	    -ms-border-radius: 0 0 3px 3px;
	    -moz-border-radius: 0 0 3px 3px;
	    -webkit-border-radius: 0 0 3px 3px;
	}


	.profile-list .profile {
	    border-radius: 3px 3px 0 0;
	    position: relative;
	}



	.profile-list li {
	    -webkit-transform-origin: 50% 0%;
	    -o-transform-origin: 50% 0%;
	    transform-origin: 50% 0%;
	    -webkit-transform: perspective(60px) rotateX(-90deg);
	    -o-transform: perspective(60px) rotateX(-90deg);
	    transform: perspective(60px) rotateX(-90deg);
	    -moz-box-shadow: 0px 2px 10px rgba(0,0,0,0.05);
	}
	.profile-list li a{
		display: block;
		padding: 15px 10px;
	}

	.profile-container .profile-list .fourth {
	    transition-delay: 0.6s;
	    -o-transition-delay: 0.6s;
	    transition-delay: 0.6s;
	} 

	.profile-list .first {
	    -webkit-transition: 0.2s linear 0.8s;
	    -o-transition: 0.2s linear 0.8s;
	    transition: 0.2s linear 0.8s;
	}

	.profile-list .second {
	    -webkit-transition: 0.2s linear 0.6s;
	    -o-transition: 0.2s linear 0.6s;
	    transition: 0.2s linear 0.6s;
	}

	.profile-list .third {
	    -webkit-transition: 0.2s linear 0.4s;
	    -o-transition: 0.2s linear 0.4s;
	    transition: 0.2s linear 0.4s;
	}

	.profile-list .fourth {
	    -webkit-transition: 0.2s linear 0.2s;
	    -o-transition: 0.2s linear 0.2s;
	    transition: 0.2s linear 0.2s;
	}

	.profile-container .profile-list li {
	    -webkit-transform: perspective(350px) rotateX(0deg);
	    -o-transform: perspective(350px) rotateX(0deg);
	    transform: perspective(350px) rotateX(0deg);
	    -webkit-transition: 0.2s linear 0s;
	    -o-transition: 0.2s linear 0s;
	    transition: 0.2s linear 0s;
	}

	.profile-container .profile-list .second {
	    -webkit-transition-delay: 0.2s;
	    -o-transition-delay: 0.2s;
	    transition-delay: 0.2s;
	}

	.profile-container .profile-list .third {
	    -webkit-transition-delay: 0.4s;
	    -o-transition-delay: 0.4s;
	    transition-delay: 0.4s;
	}

	.profile-list li a{
		color: #268CDE;
		text-decoration: none;
		text-transform: uppercase;
		letter-spacing: 2px;
	}


	.follow p{
		text-transform: uppercase;
		font-family: Times New Roman, Serif;
		font-size: 1.25em;
	}

		.profile-list li a:hover{
		background-color: #e0e0e0;

	}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
!DOCTYPE HTML>
<html lang="en-US">
	<head>
		<meta CHARSET="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">		
		<title>Title</title>
		<meta name="Keywords" content="">
		<meta name="Description" content="">

 		<link rel="stylesheet" href="css/style.css">
	</head>

	<body id="profileDropdown">

		<div class="container">
			<div class="profile">
				<img id="profilePicture" class="avatar" src="#" alt="Your Name Portrait" height="416" width="370" >
				<span id="portraitCaption">Your Name</span>
			</div><!-- END PROFILE SECTION -->

			<div class="addClass">
				<div class="follow"><button id="dropdownButton">Follow</button></div>	
					<nav id="dropDown" class="profile-list">
						<ul class="center">
							<li id="gitHubProfile" class="first" >
								<a href="https://github.com/agraymd" title="Follow me on GitHub!" target="_blank">GitHub</a>
							</li>
							<li class="second">
								<a href="" title="Connect on LinkedIn" target="_blank">LinkedIn</a>
							</li>
							<li class="third">
								<a href="" title="Email Me" target="_blank">Google</a>
							</li>
							<li class="fourth">
								<a href="" title="My Resume" target="_blank">Resume</a>
							</li>
						</ul>
					</nav>			
			</div>
		</div>







	 <script src="js/jquery.js" type="text/javascript"></script> 
	 <script src="js/main.js" type="text/javascript"></script> 
	</body>

</html>

\$\endgroup\$
  • \$\begingroup\$ In your CSS: What's the reason for giving 'body' a 'position: absolute'? \$\endgroup\$ – michael.zech Apr 5 '16 at 6:27
  • \$\begingroup\$ Good call, I'm not even sure lol. I think that had to do with previous styling where I was using it to center all content on the page. Removed and still works as it should. \$\endgroup\$ – Alex Gray Apr 5 '16 at 6:28
2
\$\begingroup\$

Your HTML formatting is messy.

  • Too much Vertical White Space
  • inconsistent indentation
  • inconsistent new line usage

I almost thought that you were missing an end tag because the indentations weren't consistent.

Changing that, this is what it looks like:

<!DOCTYPE HTML>
<html lang="en-US">
    <head>
        <meta CHARSET="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">        
        <title>Title</title>
        <meta name="Keywords" content="">
        <meta name="Description" content="">

        <link rel="stylesheet" href="css/style.css">
    </head>
    <body id="profileDropdown">   
        <div class="container">
            <div class="profile">
                <img id="profilePicture" class="avatar" src="#" alt="Your Name Portrait" height="416" width="370" >
                <span id="portraitCaption">Your Name</span>
            </div><!-- END PROFILE SECTION -->
            <div class="addClass">
                <div class="follow">
                    <button id="dropdownButton">Follow</button>
                </div>  
                <nav id="dropDown" class="profile-list">
                    <ul class="center">
                        <li id="gitHubProfile" class="first" >
                            <a href="https://github.com/agraymd" title="Follow me on GitHub!" target="_blank">GitHub</a>
                        </li>
                        <li class="second">
                            <a href="" title="Connect on LinkedIn" target="_blank">LinkedIn</a>
                        </li>
                        <li class="third">
                            <a href="" title="Email Me" target="_blank">Google</a>
                        </li>
                        <li class="fourth">
                            <a href="" title="My Resume" target="_blank">Resume</a>
                        </li>
                    </ul>
                </nav>          
            </div>
        </div>
        <script src="js/jquery.js" type="text/javascript"></script> 
        <script src="js/main.js" type="text/javascript"></script> 
    </body>
</html>
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.