📁 File Manager

Dosya Düzenle: menux.php

<header>
  
  <div class="college-topbar">
    
    <div class="college-logo">
      <a href="#"><img src="https://upload.wikimedia.org/wikipedia/commons/4/4a/Logo_of_Mangaldai_College.png" alt="Mangaldai College Logo"></a>
    </div>

<div class="college-location">
      <span class="small">Welcome to</span>
      <span class="bold">Mangaldai College</span>
    </div>

<div class="college-search">
      <select>
        <option>All</option>
        <option>Departments</option>
        <option>Courses</option>
        <option>Events</option>
      </select>
      <input type="text" placeholder="Search Mangaldai College">
      <button>🔍</button>
    </div>

<div class="college-lang">
      🌐 EN
    </div>

<div class="college-account">
      <span class="small">Hello, Guest</span>
      <span class="bold">Login / Register</span>
    </div>

<div class="college-returns">
      <span class="small">Quick</span>
      <span class="bold">Links</span>
    </div>

<div class="college-cart">
      🎓 <span class="bold">Portal</span>
    </div>
  </div>

<div class="college-subbar">
    <div class="all-btn" onclick="openSidebar()">☰ All</div>
    <a href="#">Departments</a>
    <a href="#">Courses</a>
    <a href="#">Events</a>
    <a href="#">Alumni</a>
    <a href="#">Contact</a>
  </div>
</header>

<div id="college-sidebar" class="college-sidebar">
  <a href="javascript:void(0)" class="closebtn" onclick="closeSidebar()">×</a>
  <a href="#">Computer Science</a>
  <a href="#">Physics</a>
  <a href="#">Chemistry</a>
  <a href="#">Mathematics</a>
  <a href="#">Zoology</a>
  <a href="#">Botany</a>
  <a href="#">Arts</a>
  <a href="#">Commerce</a>
  <a href="#">IQAC</a>
  <a href="#">RDC</a>
</div>

/* Topbar */
.college-topbar {
  background: #131921; /* Amazon dark navy */
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  gap: 15px;
}
.college-logo img {
  width: 100px;
}
.college-location,
.college-account,
.college-returns,
.college-lang,
.college-cart {
  cursor: pointer;
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.college-location:hover,
.college-account:hover,
.college-returns:hover,
.college-lang:hover,
.college-cart:hover {
  border: 1px solid white;
  border-radius: 3px;
}
.small {
  font-size: 12px;
  color: #ddd;
  line-height: 14px;
}
.bold {
  font-size: 14px;
  font-weight: bold;
  line-height: 16px;
}

/* Search */
.college-search {
  display: flex;
  flex: 1;
  max-width: 650px;
  height: 40px;
}
.college-search select {
  padding: 0 6px;
  border: none;
  border-radius: 4px 0 0 4px;
  background: #f3f3f3;
  font-size: 14px;
}
.college-search input {
  flex: 1;
  padding: 0 10px;
  border: none;
  font-size: 15px;
}
.college-search button {
  background: #febd69; /* Amazon yellow */
  border: none;
  padding: 0 15px;
  font-size: 18px;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
}
.college-search button:hover {
  background: #f3a847;
}

/* Subbar */
.college-subbar {
  background: #232f3e; /* Amazon lighter navy */
  color: white;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 8px 15px;
  font-size: 14px;
}
.college-subbar a,
.college-subbar .all-btn {
  cursor: pointer;
  padding: 6px 8px;
}
.college-subbar a:hover,
.college-subbar .all-btn:hover {
  border: 1px solid white;
  border-radius: 3px;
}

/* Sidebar */
.college-sidebar {
  height: 100%;
  width: 0;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #fff;
  color: #111;
  overflow-x: hidden;
  transition: 0.4s;
  padding-top: 60px;
  z-index: 2000;
}
.college-sidebar a {
  padding: 12px 20px;
  text-decoration: none;
  font-size: 18px;
  color: #111;
  display: block;
}
.college-sidebar a:hover {
  background: #f3f3f3;
}
.college-sidebar .closebtn {
  position: absolute;
  top: 15px;
  right: 25px;
  font-size: 28px;
  color: #111;
}

/* Responsive */
@media (max-width: 991px) {
  .college-lang, .college-returns { display: none; }
  .college-search { max-width: 100%; }
}
@media (max-width: 600px) {
  .college-location { display: none; }
  .college-search select { display: none; }
  .college-account span.small { display: none; }
  .college-subbar { flex-wrap: wrap; font-size: 12px; gap: 10px; }
}
</style>

İptal