-1
達成したいのは、私のブラウザの解像度を600px以下に変更した場合、家以外のタグが消えることです。サンドイッチボタンがクリックされたが（管理者コントロール）と（ログアウト）が消えていないときにのみ再び表示されます。私は、両方の "表示"属性をjavascriptを使用して "ブロック"するためです。それはCSSコード（.topnav a：not（：first）{display：none;}と矛盾します）を修正し解決策を探していますが、運がないので何か助けと助言をいただければ幸いです。cant画面解像度が600px未満の場合<a>タグを隠す
これは、それがここに
どのように見えるかであるPHPは
<?php
error_reporting(E_ALL & ~E_NOTICE);
error_reporting(E_ERROR | E_PARSE);
session_start();
?>
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="topnav" id="myTopnav">
<a href="index.php">Home</a>
<a href="speaker.php">Speakers</a>
<a href="about.php">About</a>
<a href="contact.php">Contact</a>
<a href="reservation.php">Reservation</a>
<a href="signOut.php" id="signOut" style="float:right">Sign Out</a>
<a href="myAccount.php" id="user" style="float:right; text-transform:capitalize;"><?php echo $_SESSION['firstname']; ?></a>
<a href="signUp.php" id="signUp" style="float:right">Sign Up</a>
<a href="signIn.php" id="signIn" style="float:right">Sign In</a>
<a href="adminControl.php" id="adminControl" style="float:right; width:110px;">Admin control</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">☰</a>
</div>
<div class="slideshow-container">
<div class="mySlides fade">
<img id="img1" src="img/homepage-image1.jpg">
<div class="text"></div>
</div>
<div class="mySlides fade">
<img id="img2" src="img/homepage-image2.jpg">
<div class="text"></div>
</div>
<div class="mySlides fade">
<img id="img3" src="img/homepage-image3.jpg">
<div class="text"></div>
</div>
<div id="dots">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
</div>
<div id="index-welcome"><p>Welcome</p></div>
<div id="footer" >Copyright 2017</div>
<script>
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex> slides.length) {slideIndex = 1}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
setTimeout(showSlides, 4000);
}
</script>
<script>
function ifAdmin()
{
document.getElementById("signIn").style.display = "none";
document.getElementById("signUp").style.display = "none";
document.getElementById("signOut").style.display = "block";
document.getElementById("adminControl").style.display = "block";
}
</script>
<script>
function ifNotAdmin()
{
document.getElementById("signIn").style.display = "none";
document.getElementById("signUp").style.display = "none";
document.getElementById("signOut").style.display = "block";
document.getElementById("adminControl").style.display = "none";
}
</script>
<script>
function ifNotLogin()
{
document.getElementById("user").style.display = "none";
document.getElementById("signOut").style.display = "none";
document.getElementById("adminControl").style.display = "none";
}
</script>
<script>
function myFunction()
{
var x = document.getElementById("myTopnav");
if (x.className === "topnav")
{
x.className += " responsive";
} else
{
x.className = "topnav";
}
}
</script>
<?php
if (isset($_SESSION['signedIn']) && $_SESSION['signedIn'] == true)
//if login
{
if($_SESSION['type'] == 1)
{
echo "<script type='text/javascript'>ifAdmin();</script>";
}
elseif($_SESSION['type'] == 0)
{
echo "<script type='text/javascript'>ifNotAdmin();</script>";
}
}
//if not login
else
{
echo "<script type='text/javascript'>ifNotLogin();</script>";
}
?>
</body>
</html>
CSS
01です@media screen and (max-width: 600px)
{
/*navbar*/
.topnav
{
height:auto;
width:100%;
overflow: hidden;
background-color: #4682B4;
position:fixed;
top:0;
z-index: 10;
}
.topnav a:not(:first-child)
{
display: none;
}
.topnav a.icon
{
float: right;
display: block;
height:15px;
}
.topnav a
{
height:15px;
width:auto;
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 16px 16px;
text-decoration: none;
font-size: 15px;
}
.topnav a:hover
{
background-color: lightblue;
color: black;
height:12px;
}
/*footer*/
#footer
{
background-color: #4682B4;
color: #f2f2f2;
text-align: center;
padding: 15px 25px;
font-size: 12px;
font-weight:bold;
position: absolute;
right: 0;
bottom: 0;
left: 0;
text-align: center;
}
}
@media screen and (max-width: 600px)
{
.topnav.responsive
{
position: relative;
}
.topnav.responsive .icon
{
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a
{
float: none;
display: block;
text-align: left;
}
}
私はそれに近いと思います。私はディスプレイを追加する：なし！重要;代わりに "表示：なし"の代わりに、CSSでスピリスが言ったクリスのように、これは起こる。 「話し手タグ」は「ホームタグ」の他に先頭に行く。
これは私が変更するものです。
@media screen and (max-width: 600px)
{
/*navbar*/
.topnav
{
height:auto;
width:100%;
overflow: hidden;
background-color: #4682B4;
position:fixed;
top:0;
z-index: 10;
}
.topnav a#speaker
{
display:none;
}
.topnav a#about
{
display:none;
}
.topnav a#contact
{
display:none;
}
.topnav a#reservation
{
display:none;
}
.topnav a#user
{
display:none!important;
}
.topnav a#adminControl
{
display:none!important;
}
.topnav a#signOut
{
display:none!important;
}
.topnav a.icon
{
display:block;
float: right;
display: block;
height:15px;
}
.topnav a
{
height:15px;
width:auto;
float: left;
color: #f2f2f2;
text-align: center;
padding: 16px 16px;
text-decoration: none;
font-size: 15px;
}
.topnav a:hover
{
background-color: lightblue;
color: black;
height:12px;
}
@media screen and (max-width: 600px)
{
.topnav.responsive
{
position: relative;
}
.topnav.responsive .icon
{
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a#speaker
{
float: none;
display:block!important;
text-align: left;
}
.topnav.responsive a#about
{
float: none;
display:block!important;
text-align: left;
}
.topnav.responsive a#contact
{
float: none;
display:block!important;
text-align: left;
}
.topnav.responsive a#reservation
{
float: none;
display:block!important;
text-align: left;
}
.topnav.responsive a#user
{
float: none;
display:block!important;
text-align: left;
}
.topnav.responsive a#adminControl
{
float: none;
display:block!important;
text-align: left;
}
.topnav.responsive a#signOut
{
float: none;
display:block!important;
text-align: left;
}
}
ここではブートストラップを使用していません。この機能は既に構築されていますか？ –
私はそれに精通していないため。私が最後に使用したとき、それは私のデザインを台無しにする。おそらく、その使用法と機能性について完全には知らされていません。 – Red
あなたのCSSの残りはどこですか？ – Oluwaseye