2
私は最初の公式サイト用の新しいナビゲーションメニューを作成していて、問題を抱えています。 JQueryを使用してCSSを変更すると、ナビゲーションメニューの位置が変更されます。誰かがメニューを配置するためのより良い方法を私に説明できるので、それは絶対に中心に留まり、思考プロセスを説明することができますか？ありがとうございました！どのようにして効果的に私のナビゲーションメニューをCSSで投稿する
** CLARIFICATION-センタリングされているところでは、ナビゲーションメニューが隅にあるようにしています。私はしません。ホバー上のパディングが変化すると、シミングが必要です。
以下は私の現在のコードです。
$(document).ready(function() {
$('#logo').mouseenter(function() {
$('#logofade').attr("src", "csweblogoblack.png");
});
$('#logo').mouseleave(function() {
$('#logofade').attr("src", "csweblogo.png");
});
$('.menu-item a').mouseenter(function() {
$(this).css("padding-top", "30px");
$(this).css("padding-bottom", "30px");
});
$('.menu-item a').mouseleave(function() {
$(this).css("padding-top", "20px");
$(this).css("padding-bottom", "20px");
});
});/* color scheme: #000000 #263248 #7E8AA2 #FFFFFF #FF9800 */
html,
body {
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
}
ul {
list-style-type: none;
}
a {
text-decoration: none;
}
nav {
position: absolute;
text-align: center;
width: 900px;
box-shadow: 10px 10px 20px #888888;
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
top: -70px;
left: -310px;
}
.menu-item a {
color: white;
text-transform: uppercase;
font-family: 'Inconsolata', monospace;
font-size: 40px;
font-weight: bold;
display: table-cell;
padding: 20px;
display: inline-block;
}
.logo a {
color: white;
text-transform: uppercase;
font-family: 'Inconsolata', monospace;
font-size: 40px;
font-weight: bold;
display: table-cell;
padding: 20px;
display: inline-block;
}
.menu-item a:hover {
color: black;
}
#logo img {
width: 100px;
height: 100px;
}
#logo a {
padding: 70px 20% 10px;
background-color: black;
}
#logo a:hover {
background-color: #FFFFFF;
}
#home a {
background-color: #263248;
padding-left: 30%;
padding-right: 30%;
}
#contact a {
background-color: #7E8AA2;
padding-left: 40%;
padding-right: 40%;
}
#about a {
background-color: #FF9800;
padding-left: 45%;
padding-right: 45%;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Chris Scalzi Portfolio</title>
<link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<nav>
<div class="logo" id="logo">
<a><img id="logofade" src="csweblogo.png" alt="LOGO" /></a>
</div>
<div class="menu-item" id="home"><a href="*">Home</a></div>
<div class="menu-item" id="contact"><a href="*">Contact</a></div>
<div class="menu-item" id="about"><a href="*">About</a></div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>
なぜJavaScriptを使用していますか？ – sheriffderek
これはあなたの質問を明確にするのに役立ちます：https://codepen.io/sheriffderek/pen/431e1b70dca042817dd7889a7769f8f0/ – sheriffderek