Hitskin.com
by ShadesOfJay February 14th 2015, 7:34 amTechnical Details
Forum version : phpBB2Position : Founder
Concerned browser(s) : Google Chrome
Who the problem concerns : Yourself
When the problem appeared : When I am on my phone.
Forum link : no link
Description of problem
So, I created a navigation bar for my off-link site for my forum. When it hovers over, the drop down menu appears. How can I make this work additionally on a click, like if you are on a mobile device.http://virtuous-realms.tk/
Also, how do i make the nav bar expand across screen?
<hr>
HTML
- Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Virtuous-Realms</title>
<link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
</head>
<body>
<!-- *********************************************************************************************
Create a Drop Down Menu with Search Box in CSS3 and HTML
Links:
http://designmodo.com/create-drop-down-menu-search-box
********************************************************************************************* -->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title>Create a Drop Down Menu with Search Box in CSS3 and HTML</title>
<meta name="robots" content="noindex,follow" />
</head>
<body>
<ul class="nav">
<li id="settings">
<a href="#"><img src="http://i1077.photobucket.com/albums/w468/airianateply/419px-Paw-print_zpsc977e2b9.png" style="max-height: 45px; max-width: 50px;" /></a>
</li>
<li id="options">
<a href="#">Virtuous-Realms</a>
<ul class="subnav">
<li><a href="#">About Us</a></li>
<li><a href="#">Site History</a></li>
<li><a href="#">Newsletter</a></li>
<li><a href="#">Comic</a></li>
</ul>
</li>
<li id="options">
<a href="#">RP Content</a>
<ul class="subnav">
<li><a href="#">RP Updates</a></li>
<li><a href="#">Territory</a></li>
<li><a href="#">Virtues & Spirits</a></li>
<li><a href="#">Pack Legend</a></li>
</ul>
</li>
<li id="options">
<a href="#">Our Members</a>
<ul class="subnav">
<li><a href="#">Staff</a></li>
<li><a href="#">Insert Rank</a></li>
<li><a href="#">Insert Rank</a></li>
<li><a href="#">Insert Rank</a></li>
</ul>
</li>
<li id="options">
<a href="#">Member Section</a>
<ul class="subnav">
<li><a href="#">Announcements</a></li>
<li><a href="#">Weekly Checklist</a></li>
<li><a href="#">List of Members</a></li>
<li><a href="#">EFA Form</a></li>
</ul>
</li>
<li id="options">
<a href="#">Guest Section</a>
<ul class="subnav">
<li><a href="#">How to Join</a></li>
<li><a href="#">Newbie Guide</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Join Here!</a></li>
</ul>
</li>
<li>
<a href="#">Contact Us</a>
</li></ul>
<tr class="blank_row">
<td colspan="3"></td>
</tr>
<ul class="price-box-items">
<li>
<li>
<div class="item-2 active">
<h2><span>Notice</span></h2>
<h3><span></span> <em> </em></h3>
<p>You have arrived on our home page. Please take the time to look around the website. As of right now, the website is not finished, so please be patient while the pages are being made. The current time frame for each webpage is about one page per day. So this is a long process, and the pages are being completed based on importance. Thanks,- JAY.</p>
</div>
</li>
</body>
</html>
<script src="js/index.js"></script>
</body>
</html>
- Code:
@import url(http://fonts.googleapis.com/css?family=Montserrat);
body{
background-color: #803333;
margin: 0px;
padding: 0px;
font-family: 'Segoe UI', 'Arial', sans-serif;
font-size: 13px;
}
* {
margin: 0;
padding: 0;
}
.blank_row
{
height: 36px;
background-color: #FFFFFF;
}
/*COLUMNS*/
[class^="price-box"] li {
float: center;
width: 83%;
text-align: center;
}
[class^="item-"] {
margin-left: 110px;
background-color: #fff;
}
.price-box-items h2 {
color: #fff;
font-size: 30px;
line-height: 60px;
background-color: #692525;
}
.price-box-items h3 {
font-size: 24px;
line-height: 100px;
}
.price-box-items h3 span {
font-size: 48px;
}
.price-box-items em {
color: #00aec7;
}
.price-box-items p {
color: #969696;
padding: 0 20px 40px;
}
.price-box-items [class^="item-"]:hover h2,[class^="item-"].active h2 {
background-color: #692525;
}
.price-box-2 [class^="item-"] {
background-color: #323232;
}
.price-box-2 .price-box-items h3 {
color: #fff;
}
/*NAVIGATION*/
.nav {
background: #232323;
height: 60px;
display: inline-block;
}
.nav li {
float: left;
list-style-type: none;
position: relative;
}
.nav li a {
font-size: 12.959px;
color: white;
display: block;
line-height: 60px;
padding: 0 12.6px;
text-decoration: none;
border-left: 1px solid #2e2e2e;
font-family: Montserrat, sans-serif;
text-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
}
.nav li a:hover:focus {
background-color: #2e2e2e;
}
#settings a {
padding: 17px;
height: 38px;
font-size: 10px;
line-height: 24px;
margin-top: -12px;
}
#search {
width: 357px;
margin: 4px;
}
#search_text{
width: 297px;
padding: 15px 0 15px 20px;
font-size: 16px;
font-family: Montserrat, sans-serif;
border: 0 none;
height: 52px;
margin-right: 0;
color: white;
outline: none;
background: #1f7f5c;
float: left;
box-sizing: border-box;
transition: all 0.15s;
}
::-webkit-input-placeholder { /* WebKit browsers */
color: white;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: white;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: white;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
color: white;
}
#search_text:focus {
background: rgb(64, 151, 119);
}
#search_button {
border: 0 none;
background: #1f7f5c url(search.png) center no-repeat;
width: 60px;
float: left;
padding: 0;
text-align: center;
height: 52px;
cursor: pointer;
}
#options a:hover{
border-left: 0 none;
}
#options>a {
background-image: url(triangle.png);
background-position: 85% center;
background-repeat: no-repeat;
padding-right: 42px;
}
.subnav {
visibility: hidden;
position: absolute;
top: 110%;
right: 0;
width: 200px;
height: auto;
opacity: 0;
transition: all 0.1s;
background: #232323;
}
.subnav li {
float: none;
}
.subnav li a {
border-bottom: 1px solid #2e2e2e;
}
#options:hover .subnav {
visibility: visible;
top: 100%;
opacity: 1;
display:block;
}
#options:focus .subnav {
visibility: visible;
top: 100%;
opacity: 1;
display:block;
}
/*clock*/
Facebook
Twitter
Pinterest
Youtube
