0
Добрый день,Заголовок меню, не отображающееся в моем гамбургере html страница
Я разработал hummel страницу гамбургера. Мой заголовок «domoos mobile» отображается только тогда, когда гамбургер «разворачивается» (я не уверен, использую ли я правильное слово). Смотрите фотографии ниже:
Я не совсем уверен, что я здесь отсутствует, и почему мое название не отображается правильно.
Надеюсь, мой вопрос понятен и будет полезен и для других программистов. Это мой первый мобильный дизайн, поэтому я также надеюсь, что вы будете снисходительны ко мне;)
Спасибо за помощь.
Содержание страницы HTML:
<!DOCTYPE html>
<html>
<head>
<title>Domoos mobile </title>
<meta http-equiv="refresh" content="600">
<meta name="viewport" content="width=device-width, initial-scale = 1.0, maximum-scale=1.0, user-scalable=no"/>
<!--Using jQuery and jQuery UI for display effects-->
<script src="js/jquery-2.1.3.min.js"></script>
<script src="jquery-1.12.0/jquery-ui.min.js"></script>
<!--Using the hamburger menu display code-->
<script src="scripts/hamburger.js"></script>
<!--Using Media Queries, if the viewport is smaller than 700px use another stylesheet-->
<link rel="stylesheet" type="text/css" media="all" href="css/hamburger.css"/>
<link rel="stylesheet" type="text/css" href="css/mystyle_hamburger.css" />
</head>
<body>
<!--This wrapping container is used to get the width of the whole content-->
<div id="container">
<!--The Hamburger Button in the Header-->
<header>
<div id="hamburger">
<div></div>
<div></div>
<div></div>
</div>
</header>
<!--The mobile navigation Markup hidden via css-->
<nav>
<ul>
<!--<li><a href="#"><img src="assets/icons/sun_icon.png" alt="" width="14" height="14">menuitem 1</a></li> -->
<li><a href="#">menuitem 1</a></li>
<li><a href="#">menuitem 2</a></li>
<li><a href="#">menuitem 3</a></li>
<li><a href="#">menuitem 4</a></li>
<li><a href="#">menuitem 5</a></li>
<li><a href="#">menuitem 6</a></li>
</ul>
</nav>
<!--The Layer that will be layed over the content
so that the content is unclickable while menu is shown-->
<a name="top"></a>
<div id="contentLayer"></div>
<!--The content of the site-->
<div id="content">
<div id="tag_domoos_title">
<p>Domoos mobile</p>
</div>
</div>
</div>
</body>
</html>
Содержание файла CSS (mystyle_hamburger.css):
#tag_domoos_title{
font-family:Arial;
font-size: 110%;
text-align: left;
position: absolute;
top: 35px;
left: 101px;
color:black;
z-index:10;
font-weight: 900;
}
#date{
font-family:Arial;
font-size: 90%;
text-align: left;
position: absolute;
top: 85px;
left: 101px;
color:blue;
}
#time{
font-family:Arial;
font-size: 90%;
text-align: left;
position: absolute;
top: 103px;
left: 101px;
color:blue;
}
#tag_sunrise_sunset{
font-family:Arial;
font-size: 80%;
text-align: left;
position: absolute;
top: 107px;
left: 11px;
color:black;
}
#tag_weather_condition{
font-family:Arial;
font-size: 90%;
text-align: left;
position: absolute;
top: 130px;
left: 11px;
color:black;
}
#tag_weather_temperature{
font-family:Arial;
font-size: 90%;
text-align: left;
position: absolute;
top: 148px;
left: 11px;
color:black;
font-weight: 900;
}
#current_weather_conditions{
font-family:Arial;
font-size: 90%;
text-align: left;
position: absolute;
top: 168px;
left: 11px;
color:black;
}
#meteo_icon {
position: relative;
}
#meteo_icon img{
position: absolute;
right: 0;
top: 80px;
}
#meteo_forecast{
font-family:Arial;
font-size: 100%;
float:left;
padding-top: 5px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 10px;
height:434px;
width:870px;
top:200px;
position: absolute;
}
#meteo_forecast_day1{
font-family:Arial;
font-size: 80%;
text-align: left;
position: absolute;
top: 260px;
left: 11px;
color:black;
font-weight: 600;
}
#meteo_forecast_day2{
font-family:Arial;
font-size: 80%;
text-align: left;
position: absolute;
top: 330px;
left: 11px;
color:black;
font-weight: 600;
}
#meteo_forecast_day3{
font-family:Arial;
font-size: 80%;
text-align: left;
position: absolute;
top: 400px;
left: 11px;
color:black;
font-weight: 600;
}
#meteo_forecast_temperature_day1{
font-family:Arial;
font-size: 80%;
text-align: left;
position: absolute;
top: 260px;
left: 220px;
color:black;
}
#meteo_forecast_temperature_day2{
font-family:Arial;
font-size: 80%;
text-align: left;
position: absolute;
top: 330px;
left: 220px;
color:black;
}
#meteo_forecast_temperature_day3{
font-family:Arial;
font-size: 80%;
text-align: left;
position: absolute;
top: 400px;
left: 220px;
color:black;
}
#meteo_forecast_condition_day1{
font-family:Arial;
font-size: 80%;
text-align: left;
position: absolute;
top: 280px;
left: 11px;
color:black;
}
#meteo_forecast_condition_day2{
font-family:Arial;
font-size: 80%;
text-align: left;
position: absolute;
top: 350px;
left: 11px;
color:black;
}
#meteo_forecast_condition_day3{
font-family:Arial;
font-size: 80%;
text-align: left;
position: absolute;
top: 420px;
left: 11px;
color:black;
}
#domoos_logo{
position: relative;
}
#domoos_logo img{
position: absolute;
left: 0;
top: 10px;
}
#lorem{
font-family:Arial;
font-size: 100%;
text-align: left;
position: relative;
top: 700px;
left: 10px;
color:black;
}
, что ваш полный код? Это не похоже на ваш скриншот. http://codepen.io/anon/pen/XpKvpP –
Я не знаю, как работает codepen.io, но нам нужно загрузить javascript jquery-2.1.3.min.js, jquery-ui.min. js и hamburger.js. Возможно, я ошибаюсь. Спасибо за вашу помощь. – Laurent